jQuery对table表格进行增删改查


Posted in Javascript onDecember 22, 2020

最近要处理一些前端的工作,重新学习了一下jQuery,感觉还是那么的锋利啊!!!

总结了一下对table的增删改查,写一篇留着以后自己recode。

1.首先我自己写了一个简单的div布局。

jQuery对table表格进行增删改查

2.实现几个用<a>标签做的按钮的功能 分别是新增 修改 删除 查询和返回。

代码如下

html+css(原谅我写在一起吧。。毕竟渲染不是我的强项)

<html> 
 
<head><title>测试数据</title></head> 
<style type="text/css"> 
 table, td{ 
 font:100% '微软雅黑'; 
 } 
 table{width:80%;border-collapse:collapse; margin:0 0 0 100px} 
 th, td{text-align:center;border:1px solid #fff;} 
 th{background:#328aa4} 
 td{background:#e5f1f4;} 
</style> 
<script type="text/javascript" src="jquery-1.8.0.js"></script> 
<script type="text/javascript" src="jq.js"></script> 
<body> 
 <a href="#" style ="margin:100px" id="add_btn">新增</a> 
 <input id="Ktext" type="text"> <a href="#" id="search_btn"> 查询</a> 
 <a href="#" style ="margin:100px" id="back_btn">返回</a> 
 <br/> 
<table id="tb"> 
 <tr id="trr"> 
  <th style="width:100px">ID</th> 
  <th style="width:100px">Name</th> 
  <th style="width:100px">salary</th> 
  <th style="width:100px">功能</th> 
  
 </tr> 
 <tbody id="hide_tbody"> 
 <tr style="display:none" id="trr"> 
  <td style="width:100px" id="no_id"><input value='' type='text'></td> 
  <td style="width:100px"><input value='' type='text'></td> 
  <td style="width:100px"><input value='' type='text'></td> 
  <td style="width:200px" id="a"><a href="#" id="save_btn">保存</a> 
  <a href="#" id="edit_btn" style="display:none">修改</a> 
  <a href="#" id="del_btn">删除</a></td> 
 </tr> 
 </tbody> 
 <tbody id="show_tbody"> 
 <tr id="trr" > 
  <td style="width:100px" id="no_id">1</td> 
  <td style="width:100px">小王</td> 
  <td style="width:100px">3000</td> 
  <td style="width:200px" id="a"><a href="#" id="save_btn" style="display:none">保存</a> 
  <a href="#" id="edit_btn">修改</a> 
  <a href="#" id="del_btn">删除</a></td> 
 </tr> 
 <tr id="trr"> 
  <td style="width:100px" id="no_id">2</td> 
  <td style="width:100px">小李</td> 
  <td style="width:100px">4000</td> 
  <td style="width:200px" id="a"><a href="#" id="save_btn" style="display:none">保存</a> 
  <a href="#" id="edit_btn">修改</a> 
  <a href="#" id="del_btn">删除</a></td> 
 </tr> 
 <tr id="trr"> 
  <td style="width:100px" id="no_id">3</td> 
  <td style="width:100px">小张</td> 
  <td style="width:100px">5000</td> 
  <td style="width:200px" id="a"><a href="#" id="save_btn" style="display:none">保存</a> 
  <a href="#" id="edit_btn">修改</a> 
  <a href="#" id="del_btn">删除</a></td> 
 </tr> 
 <tr id="trr"> 
  <td style="width:100px" id="no_id">4</td> 
  <td style="width:100px">小赵</td> 
  <td style="width:100px">6000</td> 
  <td style="width:200px" id="a"><a href="#" id="save_btn" style="display:none">保存</a> 
  <a href="#" id="edit_btn">修改</a> 
  <a href="#" id="del_btn">删除</a></td> 
 </tr> 
 </tbody> 
</table> 
</body> 
</html>

jQuery的代码如下

$(document).ready(function(){ 
 var tb = $("#tb"); 
  
 //添加 
 $("#add_btn").click(function(){ 
  var hideTr = $("#hide_tbody",tb).children().first(); 
  var newTr = hideTr.clone().show(); 
  $("#show_tbody",tb).append(newTr); 
 }); 
  
 //保存 
 $("#save_btn",tb).die('click').live('click',function(){ 
   var tr = $(this).parent().parent(); 
  $("input[type='text']",tr).each(function(i,el){ 
   el = $(el); 
   el.parent().text(el.val()); 
   el.remove(); 
  }); 
  $("#save_btn",tr).hide(); 
  $("#edit_btn",tr).show(); 
 }); 
  
 //修改 
 $("#edit_btn",tb).die('click').live('click',function(){ 
  var tr = $(this).parent().parent(); 
  $("td:not('#a')",tr).each(function(i,el){ 
   el = $(el); 
   var html = "<input value='"+el.text()+"' type='text'>"; 
   el.html(html); 
  }); 
  $("#edit_btn",tr).hide(); 
  $("#save_btn",tr).show(); 
 }); 
  
 //删除 
 $("#del_btn",tb).die('click').live('click',function(){ 
  $(this).parent().parent().remove(); 
 }); 
  
 //查询 
 $("#search_btn").click(function(){ 
  var key = $("#Ktext").val(); 
  var sbody = $("#show_tbody"); 
  var trr = $("#trr",sbody); 
  var keyword = $("#no_id",sbody).text(); 
  for(var i = 0; i < keyword.length;i++) 
  { 
  if(keyword[i]== key[0]){ 
   trr.eq(i).show(); 
  }else{ 
   trr.eq(i).hide(); 
  } 
  } 
 }); 
 //返回 
 $("#back_btn").click(function(){ 
  var sbody = $("#show_tbody"); 
  $("#trr",sbody).show(); 
  
 }); 
});

虽然有点简陋不过还是蛮实用的。
功能展示如下

jQuery对table表格进行增删改查

jQuery对table表格进行增删改查

jQuery对table表格进行增删改查

jQuery对table表格进行增删改查

其中查询功能是按照ID来进行查询的,点返回后可以复原数据。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
增强的 JavaScript 的 trim 函数的代码
Aug 13 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
Feb 14 Javascript
我的javascript 函数链之演变
Apr 07 Javascript
flash遮住div问题的正确解决方法
Feb 27 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
js进行表单验证实例分析
Feb 10 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
Nov 20 Javascript
给原生html中添加水印遮罩层的实现示例
Apr 02 Javascript
javascript基础知识讲解
Jan 11 #Javascript
bootstrap侧边栏圆点导航
Jan 11 #Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 #Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
Jan 10 #Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 #Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 #Javascript
vue2滚动条加载更多数据实现代码
Jan 10 #Javascript
You might like
php 数组的指针操作实现代码
2011/02/08 PHP
php 字符串替换的方法
2012/01/10 PHP
浅谈php和.net的区别
2014/09/28 PHP
php判断一个数组是否为有序的方法
2015/03/27 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
js动态切换图片的方法
2015/01/20 Javascript
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
判断网页编码的方法python版
2016/08/12 Python
Python中list初始化方法示例
2016/09/18 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
python如何查看安装了的模块
2020/06/23 Python
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
请解释接口的显式实现有什么意义
2012/05/26 面试题
室内设计专业学生的自我评价分享
2013/11/27 职场文书
大学校庆邀请函
2014/01/11 职场文书
单身联谊活动方案
2014/01/29 职场文书
升职感谢信
2015/01/22 职场文书
资料员岗位职责范本
2015/04/13 职场文书
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL