添加动态行 Table 未显示正确的行

Question

我正在尝试在我的代码中添加 table 的动态行。当我点击添加按钮时，它显示了不正确的行。它假设显示复选框、下拉列表和输入文本行而不是 header 行。下面是 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>

添加动态行 Table 未显示正确的行

Add Dynamic Row Table Not Displaying The Right Row

html

javascript

row

add