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 相关文章推荐
csdn 博客中实现运行代码功能实现
Aug 29 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
coffeescript使用的方式汇总
Aug 05 Javascript
jQuery图片渐变特效的简单实现
Jun 25 Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 Javascript
原生js实现照片墙效果
Oct 13 Javascript
原型和原型链 prototype和proto的区别详情
Nov 02 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生成HTML静态页面实例代码
2008/08/31 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
[01:09:24]Ti4开幕式
2014/07/19 DOTA
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
Python之reload流程实例代码解析
2018/01/29 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
详解anaconda安装步骤
2020/11/23 Python
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
求职信需要的五点内容
2014/02/01 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
初中学生评语大全
2014/04/24 职场文书
李培根演讲稿
2014/05/22 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
新闻发布会策划方案
2014/06/12 职场文书
婚前协议书范本
2014/10/27 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
留学推荐信(中英文版)
2015/03/26 职场文书
工作犯错保证书
2015/05/11 职场文书
实习证明模板
2015/06/16 职场文书
消费者投诉书范文
2015/07/02 职场文书
2015初中团支部工作总结
2015/07/21 职场文书