他の機能が動作している間はJavaScriptの機能が動作しません

Question

私はHTMLで書かれたフォームを持っています。このフォームには2つのボタンと表があります。表の各行には、チェックボックスと2つのテキストフィールドがあります。

このボタンは、表から行を追加および削除するためのボタンです。削除ボタンは、チェックボックスがチェックされている行にのみ適用されます。彼らはonClickメソッドを持っています。これは、addRow(tableID)とdeleteRow(tableID)の<script>タグでJavaScriptで書かれた2つのメソッドを参照しています。

addRow(tableID)はボタンをクリックすると機能しますが、削除ボタンをクリックすると何も起こりません。これはdeleteRow(tableID)メソッドを指します。

<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番号：

これは、フォームのコードです！：
私はちょうど上記のコードをデバッグしました。とrowのdeleteRow(tableID)メソッドからのデバッグ結果は、undefinedと表示されています。

これを解決するにはどうすればよいですか？

Answer 1

問題は、row.cells[0].childNodes[0]を使用するとノードを見つけることが非常に脆弱なことです。チェックボックスの代わりにテキストノードを取得しています。 childNodesを使用すると、HTMLへの最小限の変更でも破損します。

、より信頼性の高い方法は、一度に2つの質問をしないでくださいあなたは

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>