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 表单验证方法(实用)
Apr 28 Javascript
JQuery小知识
Oct 15 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
JavaScript对象反射用法实例
Apr 17 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
Vue侦测相关api的实现方法
May 22 Javascript
JavaScript实现滑动门效果
Jan 18 Javascript
js canvas实现俄罗斯方块
Oct 11 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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
PHP 日常开发小技巧
2009/09/23 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
Yii2如何批量添加数据
2016/05/17 PHP
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
nodejs后台集成ueditor富文本编辑器的实例
2017/07/11 NodeJs
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
Python多线程实现同步的四种方式
2017/05/02 Python
详解python中executemany和序列的使用方法
2017/08/12 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
详解Python传入参数的几种方法
2019/05/16 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
pycharm如何实现跨目录调用文件
2020/02/28 Python
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
智能钱包:Ekster
2019/11/21 全球购物
一份教室追逐打闹的检讨书
2014/09/27 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android