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 相关文章推荐
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
Jun 23 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
理解javascript中try...catch...finally
Dec 25 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 Javascript
node结合swig渲染摸板的方法
Apr 11 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 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
Yii分页用法实例详解
2014/12/04 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
js导出txt示例代码
2014/01/14 Javascript
js window.open弹出新的网页窗口
2014/01/16 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
Python中的pack和unpack的使用
2018/03/12 Python
python实现读Excel写入.txt的方法
2018/04/29 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
C#面试常见问题
2013/02/25 面试题
学期自我鉴定范文
2013/10/01 职场文书
教师实习的自我鉴定
2013/10/26 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
python源码剖析之PyObject详解
2021/05/18 Python