javascript在表中添加新行

我想通过javascript在表中添加一个新行。我想要在总和所在的最后一行之前插入行，并且还要在表中插入每个新行的情况下增加标签中的数字。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>

这就是表格的代码，我想让它在'第2行'之下，但在总行之前。而且每个新行都将标签更改为第3号：例如或第4号等任何想法我可以做到这一点。我只需要使用JavaScript并且不需要外部工具，或者允许使用jQuery。由于提前，Laziale

来源

2012-01-09 Laziale

确保你在你的表有一个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/

来源

2012-01-09 18:50:11

感谢您的回复，这工程，我所看到的，但有一两件事，我该如何使用JS代码单击该按钮时？因为表单上还会有一个按钮与增加一个字段无关。我可以在按钮上执行onclick事件并使用上面的代码吗？感谢您的帮助我 – Laziale 2012-01-09 19:42:30

最好的解决方案将取决于您的实际HTML标记。了解输入和表格之间的关系会有所帮助。 – 2012-01-09 20:58:19