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 相关文章推荐
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
Apr 02 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
Vue-Router模式和钩子的用法
Feb 28 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
ElementUI radio组件选中小改造
Aug 12 Javascript
vue 组件开发原理与实现方法详解
Nov 29 Javascript
vue总线机制(bus)知识点详解
May 10 Javascript
vue+Element-ui实现登录注册表单
Nov 17 Javascript
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
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中显示格式化的用户输入
2006/10/09 PHP
PHP人民币金额数字转中文大写的函数代码
2013/02/27 PHP
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
浅谈php命令行用法
2015/02/04 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
PDO::commit讲解
2019/01/27 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
jquery中实现标签切换效果的代码
2011/03/01 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
Javascript从数组中随机取出不同元素的两种方法
2016/09/22 Javascript
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
使用python绘制温度变化雷达图
2019/10/18 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
企业军训感想
2014/02/07 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
邀请函格式范文
2015/02/02 职场文书
财务人员个人工作总结
2015/02/27 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书
音乐研修感悟
2015/11/18 职场文书
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python
Python实现科学占卜 让视频自动打码
2022/04/09 Python