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

最新推荐文章于 2024-07-03 02:58:57 发布

mizuhokaga

最新推荐文章于 2024-07-03 02:58:57 发布

阅读量1.5k

点赞数

分类专栏：总结文章标签： jquery html js javascript

本文为博主原创文章，转载请显著位置标明出处，未经博主允许不得用于商业目的。

本文链接：https://blog.csdn.net/qq_44831907/article/details/104408677

版权

总结专栏收录该内容

38 篇文章 1 订阅

订阅专栏

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

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

需求:
将表单的值提交至表格,并且可以删除
在这里插入图片描述

html代码很简单:

<body>

<h1>添加用户</h1>
<div id="box">
    name:<input type="text" id="user"/>
    email:<input type="text" id="email"/>
    tel:<input type="text" id="tel"/>

    <input type="button" id="btn" value="提交"/>
    <hr>
</div>

    <table border="1" id="table1" align="center"><!--align让表格居中-->
        <tr>
            <th>姓名</th>
            <th>email</th>
            <th>电话</th>
            <th>&nbsp;&nbsp;</th>
        </tr>

        <tr class="next">
            <td>mizuho</td>
            <td>mizuho@gmail.com</td>
            <td>12345678987</td>
            <td class="del"><a href="#">Delete</a></td>
        </tr>
    </table>
    </body>

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("<tr><td>" + $name +
                    "</td><td>" + $email +
                    "</td><td>" + $tel +
                    "</td>"+
                    "<td class='del'><a href='#' >Delete</a></td>"+
                    "</tr>");
            });
        }

添加其实还可以用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();
        });

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jquery homework</title>
    <script src="./jquery-1.10.1.js" type="text/javascript"></script>
</head>
<body>
<h1>添加用户</h1>
<div id="box">
    name:<input type="text" id="user"/>
    email:<input type="text" id="email"/>
    tel:<input type="text" id="tel"/>
    <input type="button" id="btn" value="提交"/>
    <hr>
</div>
    <table border="1" id="table1" align="center">
        <tr>
            <th>姓名</th>
            <th>email</th>
            <th>电话</th>
            <th>&nbsp;&nbsp;</th>
        </tr>

        <tr class="next">
            <td>mizuho</td>
            <td>mizuho@gmail.com</td>
            <td>12345678987</td>
            <td class="del"><a href="#">Delete</a></td>
        </tr>
    </table>
<script>
    $(function () {
        add();
        function add() {
            var $name = $("#user").val();
            var $email = $("#email").val();
            var $tel = $("#tel").val();
            $(":button").click(function () {
                $("#table1").append("<tr><td>" + $name +
                    "</td><td>" + $email +
                    "</td><td>" + $tel +
                    "</td>"+
                    "<td class='del'><a href='#' >Delete</a></td>"+
                    "</tr>");
            });
        }
        deletef();
        function deletef() {
        	//方法一：
            // $("#table1 ").on("click", ".del", function () {
            //     $(this).parent().remove();
            //
            // });
            //方法二：
            $("#table1").click(function () {
                var length=$("#table1 tr").length-1;

                var tab=$("#table1 tr:eq("+length+")");
                tab.remove();
            });



        }

    })
</script>
</body>

</html>