Javascript (Ajouter, supprimer ligne dans 2 tableaux html)

Fermé

gislaino Messages postés 4 Date d'inscription vendredi 6 septembre 2013 Statut Membre Dernière intervention 27 décembre 2014 - 27 déc. 2014 à 14:29
Exileur Messages postés 1475 Date d'inscription mercredi 31 août 2011 Statut Membre Dernière intervention 16 décembre 2022 - 2 févr. 2015 à 20:40

salut à tous, je travail sur une application qui tourne comme suit:

j'ai deux tableaux html, le premier initialement ne contient pas de données, le deuxième contient la liste des employés. Lorsque je clique sur le lien (Ajouter) contenu dans la ligne du deuxième tableau cette ligne disparaît et va s'ajouter dans le premier tableau avec un lien (supprimer).

La mise en place de ce script tient une place importante dans la réussite du projet.

je compte vraiment sur votre aide.

A voir également:

Javascript (Ajouter, supprimer ligne dans 2 tableaux html)
Supprimer une page dans word - Guide
Partager photos en ligne - Guide
Supprimer compte instagram - Guide
Supprimer pub youtube - Accueil - Streaming
Aller à la ligne excel - Guide

1 réponse

Réponse 1 / 1

Exileur Messages postés 1475 Date d'inscription mercredi 31 août 2011 Statut Membre Dernière intervention 16 décembre 2022 150
Modifié par Exileur le 2/02/2015 à 20:43

Salut,

Vu que je suis de bonne humeur (malgré le fait d'être bloquer dans mon code)

Et que tu ne fourni aucune information sur ton tableau.

Je te propose ça :


<html>
<head>
<title>On vient de m'assister violent</title>
<script language="JavaScript">
function ajouter(id)
{
 var tableau1 = document.getElementById("tableau1"); // On défini notre tableau 1
 var tableau2 = document.getElementById("tableau2").rows; // ------------ tableau 2
    var ligne = tableau1.insertRow(-1); //On insére une nouvelle ligne a la fin du tableau avec -1
 
    var colonne1 = ligne.insertCell(0); // on cree une noubelle cellule
    colonne1.innerHTML += tableau2[id].cells[0].innerHTML; // on insére dans cette cellule la valeur présente dans le tableau 2
 
 var colonne2 = ligne.insertCell(1);
    colonne2.innerHTML += tableau2[id].cells[1].innerHTML;;

    var colonne3 = ligne.insertCell(2);
    colonne3.innerHTML += tableau2[id].cells[2].innerHTML;;
 
 var colonne4 = ligne.insertCell(3);
    colonne4.innerHTML += tableau2[id].cells[3].innerHTML;;

    var colonne5 = ligne.insertCell(4);
    colonne5.innerHTML +="<input type='button' value='-' onclick='supprimer(this.parentNode.parentNode.rowIndex);'/>"; // on insere un boutton qui permettra de faire la suppression
}

function supprimer(id)
{
 document.getElementById("tableau1").deleteRow(id); // on supprime la ligne 
}

</script>
</head>

<body>

<table style='border:5px solid black;' id="tableau1">
   <tr>
  <th>ID</th>
  <th>Nom</th>
  <th>Prenom</th>
  <th>Service</th>
  <th>Supprimer</th>
   </tr>

</table>
</br>
</br>

<table style='border:5px solid black;' id="tableau2">
   <tr>
  <th>ID</th>
  <th>Nom</th>
  <th>Prenom</th>
  <th>Service</th>
  <th>Ajouter</th>
   </tr>

   <tr>
  <td>1</td>
  <td>Java</td>
  <td>Script</td>
  <td>Informatique</td>
  <td><input type='button' value='+' onclick='ajouter(this.parentNode.parentNode.rowIndex);'/></td>
   </tr>
 
   <tr>
  <td>2</td>
  <td>PhP</td>
  <td>SQL</td>
  <td>Informatique</td>
  <td><input type='button' value='+' onclick='ajouter(this.parentNode.parentNode.rowIndex);'/></td>
   </tr>
</table>

</body>

</html>

Je te laisse te débrouiller pour l'adaptation dans ton code.

edit: J'ai rajouté quelques commentaires
edit2: le script ne supprime pas la ligne correspondante dans le deuxiéme tableau. En revanche, tu as maintenant la fonction pour supprimé une ligne dans un tableau.
N'oubliez pas de marquez votre post comme résolut lorsque vous avez eu les réponses à vos questions...
Au royaume des aveugles, les borgnes sont rois.

Discussions similaires

Voxbone ? qui est-ce ?

Que veut dire "correspondant occupé" lors d'un appel ?

Supprimer une conversation Snapchat chez les 2 utilisateurs