首先介绍下不通过后台,而只利用JS给table动态增加删除行的原理:
1.首先我们新建一个模板table,而我们要动态添加的行就是这个模板table的行,当然,这个模板table是要隐藏的,例如
<table id="tblTemplate" style="display: none">
<tr><td><input name='zdbase.com'></td></tr>
2.然后再建一个主题table,就是要给这个table添加删除行
<table id="tblMain"> <tr><td><input name='zdbase.com'></td></tr>
3.添加行方法,注意,为了兼容IE8,这个方法最好放在</body>标签后面,不然可能会提示JS脚本错误。
function addLine()
{
var tb = document.getElementById("tblMain");//获取Table
var tbClone = document.getElementById("tblTemplate");
var newTrC = tb.insertRow(tb.rows.length);
var templateRow = tbClone.rows[0];
for(var i=0; i<tbClone.rows[0].cells.length; i++)
{
tmp_cell = templateRow.cells[i].cloneNode(true);
newTrC.appendChild(tmp_cell);
}
}
4.删除行方法,这里是通过在某一行里放置了链接,点击链接删除改行。
function removeRow(obj){
var delNode=obj.parentNode.parentNode;
delNode.parentNode.removeChild(obj.parentNode.parentNode);
}