添加動態行表不顯示正確的行

Question

我試圖在我的代碼中添加表格的動態行。 當我單擊添加按鈕時，它顯示不正確的行。 它假定顯示復選框，下拉菜單和輸入文本行，而不是標題行。 以下是javascript和html代碼以及錯誤的輸出。 我需要更改javascript代碼嗎？ 我也嘗試過在網上尋找答案，但沒有發現任何問題。 請幫我謝謝。

JavaScript代碼：

<script>
function addRow(tableID){

var table=document.getElementById(tableID);
var rowCount=table.rows.length;
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;
       switch(newcell.childNodes[0].type){
        case"select-one":newcell.childNodes[0].selectedIndex=0;
        break;
        case"checkbox":newcell.childNodes[0].checked=false;
        break;
        case"text":newcell.childNodes[0].value="";
        break;}}}

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

    table.deleteRow(i);
    rowCount--;
    i--;}}}
    catch(e){alert(e);}}
</script>

HTML代碼：

<input type="button" value="Add More" onClick="addRow('dataTable')">
<input type="button" value="Delete" onClick="deleteRow('dataTable')">

<table id="dataTable" border="1">
  <tr>
    <th>✓</th>
    <th> Relationship </th>
    <th> Name </th>
    <th> Occupation </th>
    <th> Phone Number </th>
  </tr>

  <tr>
    <td><input type="checkbox" name="chk"></td>
    <td>
      <select name="fam_relationship[]" id="fam_relationship">
        <option value="">Select one</option>
        <option value="Spouse">Spouse</option>
        <option value="Father">Father</option>
        <option value="Mother">Mother</option>
      </select>
    </td>
    <td><input type="text" name="fam_name[]" id="fam_name"> </td>
    <td><input type="text" name="fam_occupation[]" id="fam_occupation"></td>
    <td><input type="text" name="fam_phone[]" id="fam_phone"> </td>
  </tr>
</table>

輸出：

Answer 1

在以下行將0替換為1 ：

newcell.innerHTML=table.rows[1].cells[i].innerHTML;

在這里rows[1]代替rows[0]

 function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; 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[1].cells[i].innerHTML; switch (newcell.childNodes[0].type) { case "select-one": newcell.childNodes[0].selectedIndex = 0; break; case "checkbox": newcell.childNodes[0].checked = false; break; case "text": newcell.childNodes[0].value = ""; break; } } } function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for (var i = 0; i < rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if (null != chkbox && true === chkbox.checked) { if (rowCount <= 1) { alert("Cannot delete all the rows."); break; } table.deleteRow(i); rowCount--; i--; } } } catch (e) { alert(e); } } 

 <input type="button" value="Add More" onClick="addRow('dataTable')"> <input type="button" value="Delete" onClick="deleteRow('dataTable')"> <table id="dataTable" border="1"> <tr> <th>✓</th> <th>Relationship</th> <th>Name</th> <th>Occupation</th> <th>Phone Number</th> </tr> <tr> <td> <input type="checkbox" name="chk"> </td> <td> <select name="fam_relationship[]" id="fam_relationship"> <option value="">Select one</option> <option value="Spouse">Spouse</option> <option value="Father">Father</option> <option value="Mother">Mother</option> </select> </td> <td> <input type="text" name="fam_name[]" id="fam_name"> </td> <td> <input type="text" name="fam_occupation[]" id="fam_occupation"> </td> <td> <input type="text" name="fam_phone[]" id="fam_phone"> </td> </tr> </table>