jQuery动态添加与删除表格行【append方法与on方法与eq方法】

基于jquery版本:jquery-1.10.1.js
去实现表格的

动态添加和动态删除(js代码在文章中间)

需求:
将表单的值提交至表格,并且可以删除

html代码很简单:

添加用户

    name:
    email:
    tel:

    
    



    

        

            
姓名
            
email
            
电话
            
  
        

        

            
mizuho
            
[email protected]
            
12345678987
            
Delete
        
    
    

html的效果:

js代码

之后就是js代码,基本思路是:为按钮和表格中最后一列的Delete的添加事件

添加到表单:

点击提交按键使得信息到表格里，append方法

  function add() {
            var $name = $("#user").val();
            var $email = $("#email").val();
            var $tel = $("#tel").val();//从表单里接收三个值
            
            //下面用的是表单选择器:button,也可以用类选择器
            $(":button").click(function () {
                $("#table1").append("" + $name +
                    "" + $email +
                    "" + $tel +
                    ""+
                    "Delete"+
                    "");
            });
        }

添加其实还可以用clone()方法,不过感觉会复杂点,clone还需要清空再传值

删除表格行

tips:这里如果用click(function())方法是不行的!click方法只能删除第一个已经存在的元素,而之后的动态产生的行是删除不了的!!!简单说,click()不能绑定在未来的元素上!on()可以!!

方法一: on方法,该添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）
“.del"就是动态产生的那一行的Delete那格,”.del"的父元素就是他所在的那一行,remove就OK了

  $("#table1").on("click", ".del", function () {
                 $(this).parent().remove();
      });

这里没有做判断所以可以全删除

方法二:
获取tr的长度再用eq方法获取某一行，再移除

$("#table1").click(function () {
            var length=$("#table1 tr").length-1;//有表头所以实际长度得减1 
            var tab=$("#table1 tr:eq("+length+")");
            tab.remove();
        });
        

完整代码：

"en">


    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    
    


添加用户
"box">
    name:"text" id="user"/>
    email:"text" id="email"/>
    tel:"text" id="tel"/>
    "button" id="btn" value="提交"/>
    


    "1" id="table1" align="center">
        "next">
            

            
姓名
            
email
            
电话
            
 ; ;
        

        
mizuho
            
mizuho@gmail.com
            
12345678987
            
"del">"#">Delete
        
    

jquery初学,多多包涵