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