Fonction en JavaScript ne fonctionne pas pendant que l'autre fonction fonctionne

Question

J'ai un formulaire écrit en HTML. Dans cette forme, il y a 2 boutons et une table. Chaque ligne de la table contient une case à cocher et 2 champs de texte.

Les boutons permettent d'ajouter et de supprimer des lignes de la table. Le bouton Supprimer s'applique uniquement aux lignes dont la case est cochée. Ils ont une méthode onClick qui fait référence à 2 méthodes écrites en JavaScript sur un tag <script> ci-dessous, addRow(tableID) et deleteRow(tableID).

Le addRow(tableID) fonctionne lorsque je clique sur ses boutons, mais rien ne se passe lorsque je clique sur le bouton Supprimer, qui fait référence à la méthode deleteRow(tableID).

Voici le code de la forme:

<form action="Page2.php" method="post" enctype="multipart/form-data"> 
 
    <!-- Contacts Details --> 
 
    <p> 
 
    <input type="button" value="Add Contact" onClick="addRow('contacts')" /> 
 
    <input type="button" value="Remove Contact" onClick="deleteRow('contacts')" /> 
 
    <p>(All actions apply only to entries with check marked check boxes only.)</p> 
 
    </p> 
 
    <table id="contacts" class="form" border="1"> 
 
    <tbody> 
 
     <tr> 
 
     <p> 
 
      <td> 
 
      <input type="checkbox" name="chk[]" checked="checked" /> 
 
      </td> 
 
      <td> 
 
      <label>Address</label> 
 
      <input type="text" name="ADDRESS[]" /> 
 
      </td> 
 
      <td> 
 
      <label for="PHONE_NUMBER">Phone Number</label> 
 
      <input type="text" class="small" name="PHONE_NUMBER[]" /> 
 
      </td> 
 
     </p> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    <script> 
 
    function addRow(tableID) { 
 
     var table = document.getElementById(tableID); 
 
     var rowCount = table.rows.length; 
 
     if (rowCount < 10) { 
 
     var row = table.insertRow(rowCount); 
 
     var colCount = table.rows[0].cells.length; 
 
     for (var i = 0; i < colCount; i++) { 
 
      var newcell = row.insertCell(i); 
 
      newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
 
     } 
 
     } else { 
 
     alert("Maximum Contacts Number is 10"); 
 
     } 
 
    } 
 

 
    function deleteRow(tableID) { 
 
     var table = document.getElementById(tableID); 
 
     var rowCount = table.rows.length; 
 
     for (var i = 0; i < rowCount; i++) { 
 
      debugger; 
 
     var row = table.rows[i]; 
 
     var chkbox = row.cells[0].childNodes[0]; 
 
     if (null != chkbox && true == chkbox.checked) { 
 
      if (rowCount <= 1) { 
 
      alert("Cannot Remove all Contacts"); 
 
      break; 
 
      } 
 

 
      table.deleteRow(i); 
 
      rowCount--; 
 
      i--; 
 
     } 
 
     } 
 
    } 
 
    </script> 
 

 
    <!-- Form Sending --> 
 
    <input type="submit" value="Proceed"> 
 
</form>

EDIT #!:
Je viens de déboguer le code ci-dessus, et j'ai découvert que les variables chkbox et row de la méthode deleteRow(tableID) sont affichées dans le débogueur comme undefined.

Que puis-je faire pour résoudre ce problème?

Answer 1

Le problème est que l'utilisation de row.cells[0].childNodes[0] est une manière extrêmement fragile de trouver des nœuds. Vous récupérez un noeud de texte au lieu de la case à cocher. L'utilisation de childNodes va rompre avec des modifications minimes du HTML.

Une façon plus fiable est de query for the element que vous recherchez

var chkbox = row.cells[0].querySelector('[type=checkbox]') 

<form action="Page2.php" method="post" enctype="multipart/form-data"> 
 
    <!-- Contacts Details --> 
 
    <p> 
 
    <input type="button" value="Add Contact" onClick="addRow('contacts')" /> 
 
    <input type="button" value="Remove Contact" onClick="deleteRow('contacts')" /> 
 
    <p>(All actions apply only to entries with check marked check boxes only.)</p> 
 
    </p> 
 
    <table id="contacts" class="form" border="1"> 
 
    <tbody> 
 
     <tr> 
 
     <p> 
 
      <td> 
 
      <input type="checkbox" name="chk[]" checked="checked" /> 
 
      </td> 
 
      <td> 
 
      <label>Address</label> 
 
      <input type="text" name="ADDRESS[]" /> 
 
      </td> 
 
      <td> 
 
      <label for="PHONE_NUMBER">Phone Number</label> 
 
      <input type="text" class="small" name="PHONE_NUMBER[]" /> 
 
      </td> 
 
     </p> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    <script> 
 
    function addRow(tableID) { 
 
     var table = document.getElementById(tableID); 
 
     var rowCount = table.rows.length; 
 
     if (rowCount < 10) { 
 
     var row = table.insertRow(rowCount); 
 
     var colCount = table.rows[0].cells.length; 
 
     for (var i = 0; i < colCount; i++) { 
 
      var newcell = row.insertCell(i); 
 
      newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
 
     } 
 
     } else { 
 
     alert("Maximum Contacts Number is 10"); 
 
     } 
 
    } 
 

 
    function deleteRow(tableID) { 
 
     var table = document.getElementById(tableID); 
 
     var rowCount = table.rows.length; 
 
     for (var i = 0; i < rowCount; i++) { 
 
      debugger; 
 
     var row = table.rows[i]; 
 
     var chkbox = row.cells[0].querySelector('[type=checkbox]'); 
 
     if (null != chkbox && true == chkbox.checked) { 
 
      if (rowCount <= 1) { 
 
      alert("Cannot Remove all Contacts"); 
 
      break; 
 
      } 
 

 
      table.deleteRow(i); 
 
      rowCount--; 
 
      i--; 
 
     } 
 
     } 
 
    } 
 
    </script> 
 

 
    <!-- Form Sending --> 
 
    <input type="submit" value="Proceed"> 
 
</form>