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 相关文章推荐
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
js 判断checkbox是否选中的实现代码
Nov 23 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
Apr 23 Javascript
关于Javascript作用域链的八点总结
Dec 06 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
jquery实现一个简单的表单验证实例
Mar 30 Javascript
angular+ionic 的app上拉加载更新数据实现方法
Jan 16 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 Javascript
vue组件中实现嵌套子组件案例
Aug 31 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之sphinx
2013/05/15 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
javascript concat数组累加 示例
2009/09/03 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
2011/05/24 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
javaScript语法总结
2016/11/25 Javascript
JS前端笔试题分析
2016/12/19 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
python实现数通设备端口监控示例
2014/04/02 Python
在python中的socket模块使用代理实例
2014/05/29 Python
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
python地震数据可视化详解
2019/06/18 Python
python pandas生成时间列表
2019/06/29 Python
Python 寻找局部最高点的实现
2019/12/05 Python
用纯css3和html制作泡沫对话框实现代码
2013/03/21 HTML / CSS
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
在线课程:Skillshare
2019/04/02 全球购物
最新的咖啡店创业计划书
2013/12/30 职场文书
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
自主招生推荐信范文
2014/05/10 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
运动会200米广播稿
2015/08/19 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
JS实现数组去重的11种方法总结
2022/04/04 Javascript