web-dev-qa-db-fra.com

Ajouter / supprimer une ligne d'une table

J'ai ce tableau avec des informations sur les personnes à charge et il y a un bouton ajouter et supprimer pour chaque ligne pour ajouter/supprimer des personnes à charge supplémentaires. Lorsque je clique sur le bouton "ajouter", une nouvelle ligne est ajoutée au tableau, mais lorsque je clique sur le bouton "supprimer", il supprime d'abord la ligne d'en-tête, puis lors d'un clic ultérieur, il supprime la ligne correspondante.

Voici ce que j'ai:

Code Javascript

   function deleteRow(row){
      var d = row.parentNode.parentNode.rowIndex;
      document.getElementById('dsTable').deleteRow(d);
   }

Code HTML

<table id = 'dsTable' >
      <tr>
         <td> Relationship Type </td>
         <td> Date of Birth </td>
         <td> Gender </td>
      </tr>
      <tr>
         <td> Spouse </td>
         <td> 1980-22-03 </td>
         <td> female </td>
         <td> <input type="button" id ="addDep" value="Add" onclick = "add()" </td>
         <td> <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(this)"  </td>
      </tr>
       <tr>
         <td> Child </td>
         <td> 2008-23-06 </td>
         <td> female </td>
         <td> <input type="button" id ="addDep" value="Add" onclick = "add()"</td>
         <td>  <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(this)" </td>
      </tr>
   </table>
javascripthtml-table
22
yogsma

JavaScript avec quelques modifications:

function deleteRow(btn) {
  var row = btn.parentNode.parentNode;
  row.parentNode.removeChild(row);
}

Et le HTML avec une petite différence:

<table id="dsTable">
  <tbody>
    <tr>
      <td>Relationship Type</td>
      <td>Date of Birth</td>
      <td>Gender</td>
    </tr>
    <tr>
      <td>Spouse</td>
      <td>1980-22-03</td>
      <td>female</td>
      <td><input type="button" value="Add" onclick="add()"/></td>
      <td><input type="button" value="Delete" onclick="deleteRow(this)"/></td>
    </tr>
    <tr>
      <td>Child</td>
      <td>2008-23-06</td>
      <td>female</td>
      <td><input type="button" value="Add" onclick="add()"/></td>
      <td><input type="button" value="Delete" onclick="deleteRow(this)"/></td>
    </tr>
  </tbody>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
42
Dan K.K.

jQuery a une fonction Nice pour supprimer des éléments du DOM .

La fonction plus proche () est cool car elle "obtiendra le premier élément qui correspond au sélecteur en testant l'élément lui-même et en parcourant ses ancêtres".

$(this).closest("tr").remove();

Chaque bouton de suppression pourrait exécuter ce code très succinct avec un appel de fonction.

10
soycharliente

Je suggère d'utiliser jQuery. Ce que vous faites en ce moment est facile à réaliser sans jQuery, mais comme vous voudrez de nouvelles fonctionnalités et plus de fonctionnalités, jQuery vous fera gagner beaucoup de temps. Je voudrais également mentionner que vous ne devriez pas avoir plusieurs éléments DOM avec le même ID dans un seul document. Dans ce cas, utilisez l'attribut class.

html:

<table id="dsTable">
  <tr>
     <td> Relationship Type </td>
     <td> Date of Birth </td>
     <td> Gender </td>
  </tr>
  <tr>
     <td> Spouse </td>
     <td> 1980-22-03 </td>
     <td> female </td>
     <td> <input type="button" class="addDep" value="Add"/></td>
     <td> <input type="button" class="deleteDep" value="Delete"/></td>
  </tr>
   <tr>
     <td> Child </td>
     <td> 2008-23-06 </td>
     <td> female </td>
     <td> <input type="button" class="addDep" value="Add"/></td>
     <td> <input type="button" class="deleteDep" value="Delete"/></td>
  </tr>
</table>

javascript:

$('body').on('click', 'input.deleteDep', function() {
   $(this).parents('tr').remove();  
});

N'oubliez pas que vous devez référencer jQuery:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

Voici un exemple de jsfiddle fonctionnel: http://jsfiddle.net/p9dey/1/

1
Michal B.

Voici le code JS Bin en utilisant jQuery. Testé sur tous les navigateurs. Ici, nous devons cliquer sur les lignes afin de les supprimer avec un bel effet. J'espère que ça aide.

1
palaѕн

Beaucoup de bonnes réponses, mais en voici une de plus;)

Vous pouvez ajouter un gestionnaire pour le clic à la table

<table id = 'dsTable' onclick="tableclick(event)">

Et puis il suffit de découvrir quelle était la cible de l'événement

function tableclick(e) {
    if(!e)
     e = window.event;

    if(e.target.value == "Delete")
       deleteRow( e.target.parentNode.parentNode.rowIndex );
}

Ensuite, vous n'avez pas à ajouter de gestionnaires d'événements pour chaque ligne et votre html semble plus net. Si vous ne voulez pas de javascript dans votre html, vous pouvez même ajouter le gestionnaire lors du chargement de la page:

document.getElementById('dsTable').addEventListener('click',tableclick,false);

La

Voici le code de travail: http://jsfiddle.net/hX4f4/2/

0
CodeBro

Salut, je ferais quelque chose comme ça:

var id = 4; // inital number of rows plus one
function addRow(){
   // add a new tr with id 
   // increment id;
}

function deleteRow(id){
   $("#" + id).remove();
}

et j'aurais une table comme celle-ci:

<table id = 'dsTable' >
      <tr id=1>
         <td> Relationship Type </td>
         <td> Date of Birth </td>
         <td> Gender </td>
      </tr>
      <tr id=2>
         <td> Spouse </td>
         <td> 1980-22-03 </td>
         <td> female </td>
         <td> <input type="button" id ="addDep" value="Add" onclick = "add()" </td>
         <td> <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(2)"  </td>
      </tr>
       <tr id=3>
         <td> Child </td>
         <td> 2008-23-06 </td>
         <td> female </td>
         <td> <input type="button" id ="addDep" value="Add" onclick = "add()"</td>
         <td>  <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(3)" </td>
      </tr>
   </table>

Aussi, si vous le souhaitez, vous pouvez créer une boucle pour construire la table. Il sera donc facile de construire la table. La même chose que vous pouvez faire avec edit :)

0
Pop Radu

J'essaierais d'abord de mettre en forme votre tableau correctement comme suit:

Je ne peux m'empêcher de penser que le formatage du tableau ne pourrait à tout le moins pas nuire.

<table>
   <thead>
      <th>Header1</th>
      ......
   </thead>
   <tbody>
       <tr><td>Content1</td>....</tr>
       ......
   </tbody>
</table>
0
thatidiotguy