Javascript：向表格添加新行，跳过元素答案

【问题标题】：Javascript: Add New Row To Table, skip th elementsJavascript：向表格添加新行，跳过元素
【发布时间】：2011-07-02 08:24:32
【问题描述】：

不久前，我发现了以下 javascript 函数，可让您动态地将行添加到表中：

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;
            //alert(newcell.childNodes);
            switch(newcell.childNodes[0].type) {
                case "text":
                        newcell.childNodes[0].value = "";
                        break;
                case "checkbox":
                        newcell.childNodes[0].checked = false;
                        break;
                case "select-one":
                        newcell.childNodes[0].selectedIndex = 0;
                        break;
            }
        }
    }

有没有人，实际上有 javascript 经验（因为我几乎没有）可以编写一个可以跳过 <th> 标签的修复程序？

这是我不想受到影响的表格部分：

<table id="scheduler">
  <tr>
    <th scope="col">Engineer</th>
    <th scope="col">Monday</th>
    <th scope="col">Tuesday</th>
    <th scope="col">Wednesday</th>
    <th scope="col">Thursday</th>
    <th scope="col">Friday</th>
    <th scope="col">Saturday</th>
    <th scope="col">Sunday</th>
  </tr>

我的问题是，当我有 <th> 标签时，标题行最终是被“克隆”的行，而不是其中只有 <td> 标签的行。

【问题讨论】：

虽然我不想推动 jQuery 或建议它总是最好的解决方案，但管理表是 jQuery 擅长的众多事情之一。

标签： javascript dynamic html-table newrow

【解决方案1】：

只需更改函数，以便指定要复制的行（给定从零开始的索引）。

addRow( "scheduler", 1 ); // to base it on the 2nd row

  // give row number------v
function addRow(tableID, num) {
    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

   // -------------------------v
   var colCount = table.rows[ num ].cells.length;
   for(var i=0; i<colCount; i++) {

        var newcell = row.insertCell(i);

        //-------------------------------v
        newcell.innerHTML = table.rows[ num ].cells[i].innerHTML;
        switch(newcell.childNodes[0].type) {
            case "text":
                    newcell.childNodes[0].value = "";
                    break;
            case "checkbox":
                    newcell.childNodes[0].checked = false;
                    break;
            case "select-one":
                    newcell.childNodes[0].selectedIndex = 0;
                    break;
        }
    }
}

【讨论】：

【解决方案2】：

试试这个：

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

    if(table.rows[0].cells[i].tagName != "th")
    {
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;             //alert(newcell.childNodes); 

        switch(newcell.childNodes[0].type)
        {                 
            case "text":                         
                newcell.childNodes[0].value = "";                         
                break;                 
            case "checkbox":                         
                newcell.childNodes[0].checked = false;                         
                break;                 
            case "select-one":                         
                newcell.childNodes[0].selectedIndex = 0;                         
                break;             
        }  
    }
    else if(table.rows.length > 1 && table.rows[1].cells[i].tagName != "th")
    {
        newcell.innerHTML = table.rows[1].cells[i].innerHTML; 

        switch(newcell.childNodes[0].type)
        {                 
            case "text":                         
                newcell.childNodes[0].value = "";                         
                break;                 
            case "checkbox":                         
                newcell.childNodes[0].checked = false;                         
                break;                 
            case "select-one":                         
                newcell.childNodes[0].selectedIndex = 0;                         
                break;             
        }  
    }
}}

【讨论】：