jQuery-表中数据的添加与删除-Toy模板网

这篇具有很好参考价值的文章主要介绍了jQuery-表中数据的添加与删除。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

<!DOCTYPE HTML>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>表中数据的添加与删除</title>
   <link rel="stylesheet" type="text/css" href="styleB/css.css" />
   <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
   <script type="text/javascript">
       $(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
               /*
                   <tr>
                       <td>Tom</td>
                       <td>tom@tom.com</td>
                       <td>5000</td>
                       <td><a href="#">Delete</a></td>
                   </tr>
               */
               //append() 比如：x.append(y) 在x元素中添加y元素
               //appendTo() 比如：a.appendTo(b) 把 a 插入到 b 子元素末尾，成为最后一个子元素
               $("<tr></tr>").append("<td>"+name+"</td>")
                           .append("<td>"+email+"</td>")
                           .append("<td>"+salary+"</td>")
                           .append("<td><a href='#'>Delete</a></td>")
                           .appendTo("#employeeTable"); //将元素添加到id=employeeTable元素中
           });
       });
   </script>
</head>
<body>
   <table id="employeeTable">
       <tr>
           <th>姓名</th>
           <th>邮箱</th>
           <th>薪资</th>
           <th>删除</th>
       </tr>
       <tr>
           <td>张三</td>
           <td>zhangsan@163.com</td>
           <td>5000</td>
           <td><a href="#">Delete</a></td>
       </tr>
       <tr>
           <td>李四</td>
           <td>lisi@sohu.com</td>
           <td>8000</td>
           <td><a href="#">Delete</a></td>
       </tr>
       <tr>
           <td>王五</td>
           <td>wangwu@126.com</td>
           <td>10000</td>
           <td><a href="#">Delete</a></td>
       </tr>
   </table>

   <div id="formDiv">
       <h4>添加新员工</h4>
       <table>
           <tr>
               <td class="word">姓名: </td>
               <td class="inp">
                   <input type="text" name="empName" id="empName" />
               </td>
           </tr>
           <tr>
               <td class="word">邮箱: </td>
               <td class="inp">
                   <input type="text" name="email" id="email" />
               </td>
           </tr>
           <tr>
               <td class="word">薪资: </td>
               <td class="inp">
                   <input type="text" name="salary" id="salary" />
               </td>
           </tr>
           <tr>
               <td colspan="2" align="center">
                   <button id="addEmpButton" value="abc">
                       确认添加
                   </button>
               </td>
           </tr>
       </table>
   </div>
</body>
</html>