jQuery对table表格进行增删改查

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

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

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

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

代码如下

html+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;} 
 
 
 
 
 新增 
   查询 
 返回 
 
 
 
 
 
  
ID
 
  
Name
 
  
salary
 
  
功能
 
  
 
 
 
 
 
 
  
 
  
 
  
 
  
保存 
  修改 
  删除
 
 
 
 
 
 
 
 
 
  
1
 
  
小王
 
  
3000
 
  
保存 
  修改 
  删除
 
 
 
 
 
  
2
 
  
小李
 
  
4000
 
  
保存 
  修改 
  删除
 
 
 
 
 
  
3
 
  
小张
 
  
5000
 
  
保存 
  修改 
  删除
 
 
 
 
 
  
4
 
  
小赵
 
  
6000
 
  
保存 
  修改 
  删除
 
 
 
 
 
 
 
 

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 = ""; 
   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(); 
  
 }); 
}); 

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。