jQuery对table表格进行增删改查

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

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

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

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

代码如下

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

 
  
 
 
 
 
 
 新增 
    查询 
 返回 
 
 
 
  
 
    
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来进行查询的，点返回后可以复原数据。

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

您可能感兴趣的文章:

• jQuery实现获取table表格第一列值的方法
• JQuery Ajax动态生成Table表格
• 基于JQuery的动态删除Table表格的行和列的代码
• JQuery 动态生成Table表格实例代码
• 使用jQuery操作HTML的table表格的实例解析
• jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
• jQuery+CSS实现的table表格行列转置功能示例
• jQuery实现table表格checkbox全选的方法分析
• jQuery实现table表格信息的展开和缩小功能示例