jQuery-表中数据的添加与删除

    

    

    

    
    
        $(function(){
            //删除用户的方法
            function delA(){
                //获取要删除员工的名字
                //$(this)表示鼠标单击的元素
                //.parents()表示返回父元素
                //find()返回后代元素
                //”td:eq(0)”表示第一个td元素
                //text()获取指定元素的文本内容
                const name = $(this).parents(“tr”).find(“td:eq(0)”).text();
                //弹出一个确认框
                //confirm()在弹窗中用户点击确定按钮返回true，用户点击取消按钮返回false
                const flag = confirm(“确认删除—>” + name + “<—的信息吗？");
                if(flag){
                    //删除当前a所在的tr
                    //用户点击的按钮所在的一行信息被删除
                    $(this).parents(“tr”).remove();
                }
                //取消默认行为
                return false;
            }

            //删除用户，下面两行代码的意义一样，都是给a标签绑定鼠标点击事件然后执行delA函数
            //$(“a”).click(delA);
            $(“a”).live(“click” , delA);

            //添加员工
            $(“#addEmpButton”).click(function(){
                //获取用户填写的内容
                const name = $(“#empName”).val();
                const email = $(“#email”).val();
                const salary = $(“#salary”).val();

                //创建tr
                /*
                    

                        

Tom
                        

tom@tom.com
                        

5000
                        

Delete
                    
                */
                //append()  比如：x.append(y) 在x元素中添加y元素
                //appendTo() 比如：a.appendTo(b)   把 a 插入到 b 子元素末尾，成为最后一个子元素
                $(“

“).append(“

“+name+””)
                              .append(“

“+email+””)
                              .append(“

“+salary+””)
                              .append(“

Delete”)
                              .appendTo(“#employeeTable”); //将元素添加到id=employeeTable元素中
            });
        });
    

    

        

            

            

            

            

        

        

            

            

            

            

        

        

            

            

            

            

        

        

            

            

            

            

        

    

姓名	邮箱	薪资	删除
张三	zhangsan@163.com	5000	Delete
李四	lisi@sohu.com	8000	Delete
王五	wangwu@126.com	10000	Delete

    

添加数据信息

删除数据信息：

 

 

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: PAI-Diffusion中文模型全面升级，海量高清艺术大图一键生成

作者：段忠杰（终劫）、刘冰雁（伍拾）、汪诚愚（熊兮）、黄俊（临在） 背景 以Stable Diffusion模型为代表，AI生成内容（AI Generated Content，AIGC）的模型和应用呈现出井喷式的增长趋势。在先前的工作中，阿里云机器学习PAI团…