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 相关文章推荐
js变量作用域及可访问性的探讨
Nov 23 Javascript
JavaScript arguments 多参传值函数
Oct 24 Javascript
Jquery easyui 下loaing效果示例代码
Aug 12 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
extjs render 用法介绍
Sep 11 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
Mar 05 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
Javascript中prototype的使用详解
Jun 18 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 Javascript
浅谈JS如何实现真正的对象常量
Jun 25 Javascript
jQuery实现轮播图效果demo
Jan 11 jQuery
学前端,css与javascript重难点浅析
Jun 11 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与C#的值类型指向区别的详解
2013/05/21 PHP
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
jQuery操作DOM之获取表单控件的值
2015/01/23 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
Mac下使用charles遇到的问题以及解决办法
2017/01/10 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
详解JS数值Number类型
2018/02/07 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
pycharm运行scrapy过程图解
2019/11/22 Python
python创建学生成绩管理系统
2019/11/22 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
应届毕业生个人自荐信范文
2013/11/30 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
安全教育的主题班会
2015/08/13 职场文书
Golang连接并操作MySQL
2022/04/14 MySQL