jQuery对table表格进行增删改查

Html

Css

ID	Name	salary	功能
			保存修改删除
1	小王	3000	保存修改删除
2	小李	4000	保存修改删除
3	小张	5000	保存修改删除
4	小赵	6000	保存修改删除

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;
}

$(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调用版本：1.7.2

立即下载

jQuery对table表格进行增删改查



代码描述：jQuery对table表格进行增删改查操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

3

最新

发表评论全部评论

暂时没有评论！

懒洋洋0

2017/10/27 15:09:10

为什么我的die()以及live()方法一直提示未解决的方法，webstrom进行设置了，也没用，不知道为什么？是和webstrom的版本有关吗？
回复

莪?╁??の0

2017/9/28 9:09:40

id不应该是唯一的么?怎么还有重复?
回复

Goddard0

2017/3/23 13:41:30

改变
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

插件王子

相关代码

jQuery对table表格进行增删改查

最新