Добавить динамическую таблицу строк, не отображающую правую строку

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>