javascript - 使用 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，还有两行没有 rowspan。如何编写以下行，以便在用户单击“插入行”按钮后，三个文本框将添加到新行中？

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