jQuery表格增删改查

最近要处理一些前端的工作，重新学习了一下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来进行查询的，点返回后可以复原数据。