欢迎加入站点基地设计开发交流群:30720409
详细内容
js给table动态增加删除行
发布日期:2012-07-03     点击:4882     字体:[ ]

首先介绍下不通过后台,而只利用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);
       }

   

   

用户评论
昵称 
内容  *
验证码   
   
Copyright © 2010 zdbase.com All Rights Reserved. 苏ICP备15039389号 可人软件设计