JavaScript 表操作

Question

我有一个只有一列十行的表格。第一列包含以文本作为行标题的行，“标题 1”、“标题 2”。第二列包含供用户输入数据的字段(文本框 和复选框)。

我想在顶部有一个标记为“添加新...”的按钮，并让它创建第三列，其中的字段与第一列相同。如果用户再次单击它，它将创建另一个包含字段的空白列(如第二列)。

有谁知道操纵 DOM 以实现此目的的有效方法吗？

我正在尝试使用 div 和 TABLES，但我已经进行了第三天，感觉比应该做的要难。

Answer 1

有趣的练习。感谢 AviewAnew 的提示，我可以做到。

function AddColumn(tableId)
{
  var table = document.getElementById(tableId);
  if (table == undefined) return;
  var rowNb = table.rows.length;
  // Take care of header
  var bAddNames = (table.tHead.rows[0].cells.length % 2 == 1);
  var newcell = table.rows[0].cells[bAddNames ? 1 : 0].cloneNode(true);
  table.rows[0].appendChild(newcell);
  // Add the remainder of the column
  for(var i = 1; i < rowNb; i++)
  {
    newcell = table.rows[i].cells[0].cloneNode(bAddNames);
    table.rows[i].appendChild(newcell);
  }
}

使用以下 HTML:

<input type="button" id="BSO" value="Add" onclick="javascript:AddColumn('TSO')"/>
<table border="1" id="TSO">
<thead>
<tr><th>Fields</th><th>Data</th></tr>
</thead>
<tbody>
<tr><td>Doh</td><td>10</td></tr>
<tr><td>Toh</td><td>20</td></tr>
<tr><td>Foo</td><td>30</td></tr>
<tr><td>Bar</td><td>42</td></tr>
<tr><td>Ga</td><td>50</td></tr>
<tr><td>Bu</td><td>666</td></tr>
<tr><td>Zo</td><td>70</td></tr>
<tr><td>Meu</td><td>80</td></tr>
</tbody>
</table>