添加动态行表不显示右行

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]

＆＃13;

＆＃13;

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);
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;