Question

我正在尝试通过javascript在表格中添加新行。我希望在总和所在的最后一行之前插入行，并且还要在表中插入每个新行的情况下增加标签中的数字。

<input type=button value='Add Row' />

<table cellspacing=0 cellpadding=4 id="table">
<tr><td>Number 1:</td><td><input value=20 style="width:30px" type=text  maxlength=2/></td></tr>
<tr><td>Number 2:</td><td><input value=25 style="width:30px" type=text  maxlength=2/></td></tr>
<tr><td style="border-top:solid 1px black;border-bottom:solid 1px black;">Sum:</td><td style="border-top:solid 1px black;border-bottom:solid 1px black;"><div>45</div></td></tr>
</table>

这是表的代码，我希望它在'number 2'行下，但在sum行之前。并且对于每个新行，标签要更改为数字3：例如，或者数字4等。知道如何做到这一点。我只需要使用javascript，不允许使用外部工具或jquery。在此先感谢Laziale

Answer 1

http://viralpatel.net/blogs/2009/03/dynamically-add-remove-rows-in-html-table-using-javascript.html

懒得粘贴代码

给出数字1,2,3 ..你应该创建你的行id，如'row1'，'row2'..

根据您生成的行

放置一个隐藏变量并增加其值

Answer 2

确保表格中有tbody元素。

var table = document.getElementById('table');

var button = document.getElementsByTagName('input')[0];

button.onclick = function() {
    var clone = table.rows[table.rows.length - 2].cloneNode(true);
    clone.cells[0].firstChild.data = 
       clone.cells[0].firstChild.data.replace(/(\d+):/,function(str,g1) { 
                                                          return (+g1 + 1) + ':'; 
                                                       });
    table.tBodies[0].insertBefore(clone, table.rows[table.rows.length-1]);
};

http://jsfiddle.net/Btjg6/

此外，将最后一行放在<tfoot>元素中可能会有意义，这会改变一些事情。

button.onclick = function() {
    var clone = table.rows[table.rows.length - 2].cloneNode(true);
    clone.cells[0].firstChild.data =
        clone.cells[0].firstChild.data.replace(/(\d+):/,function(str,g1) { 
                                                           return (+g1 + 1) + ':'; 
                                                        });
    table.tBodies[0].appendChild(clone);
};

http://jsfiddle.net/Btjg6/1/

javascript在表格中添加新行

2 个答案: