jQuery表格的维护和删除操作

2019-11-19 17:45:19

字体：大中小

来源：转载

供稿：网友

最近学习jQuery，可以利用js函数来实现对表格的维护和删除，相对于JavaScript简单方便

首先看看页面的实现效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>  <title>添加用户</title> </head> <script src="user.js"></script> <body>  <center>   <br><br>   添加用户:<br><br>   姓名: <input type="text" name="name" id="name" />     email: <input type="text" name="email" id="email" />     电话: <input type="text" name="tel" id="tel" /><br><br>   <button id="addUser">提交</button>   <button id="deleteUser">删除选中</button>   <br><br>   <hr>   <br><br>   <table id="usertable" border="1" cellpadding="5" cellspacing=0>    <tbody>     <tr>      <th><input type="checkbox" id="allCheckbox"/></th>      <th>姓名</th>      <th>email</th>      <th>电话</th>      <th>修改</th>      <th>删除</th>     </tr>    </tbody>   </table>   <br>   <br>   <br>   <hr>   修改用户:<br><br>   姓名: <input type="text" name="name" id="name_update" />     email: <input type="text" name="email" id="email_update" />     电话: <input type="text" name="tel" id="tel_update" /><br><br>   <input type="hidden" id="id_update"/>   <button id="updateUser">提交</button>  </center> </body></html>

页面展示

这里写图片描述

js后台代码

$().ready(function(){ var index = 1; /**  * 完成添加功能  */ $("#addUser").click(function(){  /**   * 1、获取姓名,电话,email的值   * 2、创建   *  <tr>   *   <td><input type="checkbox"></td>   *   <td>${姓名}</td>   *   <td>${email}</td>   *   <td>${phone}</td>   *   <td><a>修改</a></td>   *   <td><a>删除</a></td>   *  </tr>   * 3、把创建完成的tr追加到tbody上   */  var name = $("#name").val();  var email = $("#email").val();  var tel = $("#tel").val();  var $checkbox = $("<input/>").attr("type","checkbox");  var $checkboxTD = $("<td/>").append($checkbox);  $checkboxTD.attr("id",index);  index++;  var $nameTD = $("<td/>").text(name);  var $emailTD = $("<td/>").text(email);  var $phoneTD = $("<td/>").text(tel);  var $updateA = $("<a/>").text("修改");  /**   * 完成修改的功能   */  $updateA.css("cursor","pointer");  /**   * 给修改的超级链接添加click事件   */  $updateA.click(function(){   var name = $(this).parent().siblings("td:eq(1)").text();   var email = $(this).parent().siblings("td:eq(2)").text();   var tel = $(this).parent().siblings("td:eq(3)").text();   var id = $(this).parent().siblings("td:eq(0)").attr("id");   $("#name_update").val(name);   $("#email_update").val(email);   $("#tel_update").val(tel);   $("#id_update").val(id);  });  var $updateTD = $("<td/>").append($updateA);  var $delA = $("<a/>").text("删除");  $delA.css("cursor","pointer");  $delA.click(function(){//完成删除本行的功能   if(window.confirm("您确认要删除吗?")){    $(this).parent().parent().remove();    }  });  var $delTD = $("<td/>").append($delA);  var $tr = $("<tr/>").append($checkboxTD).   append($nameTD).append($emailTD).   append($phoneTD)   .append($delTD).append($updateTD);  $("#usertable tbody").append($tr); }); /**  * 完成删除几行的功能  */ $("#deleteUser").click(function(){  if(window.confirm("您确认要删除吗?")){   /**    * :checkbox 所有的checkbox    * :not(#allCheckbox) 不包含id为allCheckbox    *  被选中的    */   $(":checkbox:not(#allCheckbox):checked").parent().parent().remove();    } }); /**  * 全选功能  */ $("#allCheckbox").click(function(){  if($(this).attr("checked")){   $(":checkbox:not(#allCheckbox)").attr("checked",true);  }else{   $(":checkbox:not(#allCheckbox)").attr("checked",false);  } }); /**  * 完成修改操作  */ $("#updateUser").click(function(){  /**   * 获取到修改的id的值，根据值去匹配table中的行   */  var idValue = $("#id_update").val();  var name_update = $("#name_update").val();  var email_update = $("#email_update").val();  var tel_update = $("#tel_update").val();  /**   * 根据修改的id的值就定位某一行(td)   */  $("td[id="+idValue+"]").siblings("td:eq(0)").text(name_update);  $("td[id="+idValue+"]").siblings("td:eq(1)").text(email_update);  $("td[id="+idValue+"]").siblings("td:eq(2)").text(tel_update); });});

以上所述是小编给大家介绍的jQuery表格的维护和删除操作，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：拖动时防止选中

下一篇：折叠菜单及选择器的运用