JavaScript Table Manipulation
JavaScript Table Manipulation
我有一个有一列和大约十行的表格。 第一列包含以文本作为行标题的行,"标题 1"、"标题 2"。 第二列包含供用户键入数据的字段(文本框和复选框)。
我想在顶部有一个标有"添加新..."的按钮,并让它创建第三列,其字段与第一列相同。 如果用户再次单击它,它将创建另一个带有字段的空白列(如第二列)。
有谁知道操纵 DOM 来实现这一点的有效方法?
我正在试验div
和TABLES
,但我在做这件事的第三天,感觉比应该的更难。
有趣的练习。感谢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>
类似
function(table) { for(var i=0;i<table.rows.length;i++) { newcell = table.rows[i].cells[0].cloneNode(true); table.rows[i].appendChild(newcell); } }
相关文章:
- Jquery - table.row(tr) is undefined
- javascript, ajax, table, colour
- jQuery parent() in table
- click-cell.bs.table是如何工作的
- onclick for table TD
- AppendChild Form / Table [Javascript/Html/PHP]
- Javascript: Output table
- onRowClick for react-bootstrap-table
- Google Fusion Table Javascript UPDATE Query?
- jquery .删除整个 li 或 table 元素后
- JQuery Click on Table
- AngularJS translate table
- CSS styling of <UL> as table
- Bootstrap Table
- JavaScript: string Manipulation
- 如何从SQL API代码迁移到Google Fusion Table API v1
- Web应用程序性能:SVG、Canvas或Dom Manipulation
- 选择/取消选择复选框,该复选框未按预期使用.coneast('table').find('tbo
- Jquery table manipulation
- JavaScript Table Manipulation