使用 Javascript 插入新行（rowspan）

Question

我有如下的 Javascript：

function addRow(table1) {

            var table = document.getElementById(table1);

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

HTML 如下：

<input type="button" value="Insert row" onclick="addRow('table1')" />
<table id="table1" border=1>
    <tr>
        <td rowspan=2><input type="text" name="txt1"></td>
        <td><input type="text" name="txt2"></td>
    </tr>
    <tr>
        <td><input type="text" name="txt3"></td>
    </tr>
</table>

我有一排有rowspan=2，还有两排没有行跨度。如何编写以下行，以便用户单击“插入行”按钮后，将三个文本框添加到新行中？

newcell.innerHTML = table.rows[0].cells.innerHTML;

Answer 1

请注意，您的代码中有：

> newcell.innerHTML = table.rows[0].cells.innerHTML;

我想你的意思是：

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

但无论如何，您是否考虑过使用克隆行来代替？例如类似于以下内容（未经测试）：

function addRow(tableID) {
  var table = document.getElementById(tableID);
  var row = table.rows[0].cloneNode(true);
  var inputs = row.getElementsByTagName('input');
  var i = inputs.length;

  while (i--) {

    if (inputs[i].type = 'text') {
      inputs[i].vaule = '';

      // Might want to change other properties too
    }
  }
  table.tBodies[0].appendChild(row);
}