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 相关文章推荐
JavaScript写的一个DIV 弹出网页对话框
Aug 14 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
JavaScript中String.prototype用法实例
May 20 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
Jul 31 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
微信小程序实现手势图案锁屏功能
Jan 30 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 Javascript
详解vue路由
Aug 05 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
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
destoon数据库表说明汇总
2014/07/15 PHP
js继承 Base类的源码解析
2008/12/30 Javascript
js 匿名调用实现代码
2009/06/19 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
详解jQuery中的事件
2016/12/14 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
Python中关于使用模块的基础知识
2015/05/24 Python
python实现解数独程序代码
2017/04/12 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
Python os模块常用方法和属性总结
2020/02/20 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
jupyter notebook实现显示行号
2020/04/13 Python
大学生护理专业自荐信
2013/10/03 职场文书
写好自荐信的几个要点
2013/12/26 职场文书
新学期红领巾广播稿
2014/01/14 职场文书
小学新学期教师寄语
2014/01/18 职场文书
幼儿园元旦活动感言
2014/03/02 职场文书
财务负责人任命书
2014/06/06 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
大学生村官个人总结
2015/02/15 职场文书
小学教师自我评价
2015/03/04 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
员工工作心得体会
2019/05/07 职场文书
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript
Golang 字符串的常见操作
2022/04/19 Golang