jQuery表格的维护和删除操作


Posted in Javascript onFebruary 03, 2017

最近学习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>

页面展示

jQuery表格的维护和删除操作

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表格的维护和删除操作,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS 的应用开发初探(mootools)
Dec 19 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
js 浏览器事件介绍
Mar 30 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
Vue.js组件使用开发实例教程
Nov 01 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 Javascript
vue router 配置路由的方法
Jul 26 Javascript
vue3修改link标签默认icon无效问题详解
Oct 09 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 Javascript
浅谈vue的第一个commit分析
Jun 08 Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 Javascript
折叠菜单及选择器的运用
Feb 03 #Javascript
jQuery读取XML文件的方法示例
Feb 03 #Javascript
JavaScript函数基础详解
Feb 03 #Javascript
JavaScript提高加载和执行效率的方法
Feb 03 #Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 #Javascript
Node.js的特点详解
Feb 03 #Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 #Javascript
You might like
PHP缓存技术的多种方法小结
2012/08/14 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
JQUERY dialog的用法详细解析
2013/12/19 Javascript
jQuery实现获取绑定自定义事件元素的方法
2015/12/02 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
2016/10/10 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
js定时器实例分享
2016/12/20 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
Angular 4 指令快速入门教程
2017/06/07 Javascript
React-intl 实现多语言的示例代码
2017/11/03 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
vue3.0 上手体验
2020/09/21 Javascript
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
python之信息加密题目详解
2019/06/26 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
基于PyTorch中view的用法说明
2021/03/03 Python
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
2014年单位植树节活动方案
2014/03/23 职场文书
骨干教师考核评语
2014/12/31 职场文书
辞职信的写法
2015/02/27 职场文书