最近学习jQuery，可以利用js函数来实现对表格的维护和删除，相对于JavaScript简单方便

首先看看页面的实现效果

<Meta http-equiv="Content-Type" content="text/html; charset=utf-8">

添加用户:

姓名: email: 电话:

Box" id="allCheckBox"/>

修改用户:

姓名: email: 电话:

这里写图片描述

添加功能 */ $("#addUser").click(function(){ /** * 1、获取姓名,电话,email的值 * 2、创建 * Box">修改删除Box = $("").attr("type","checkBox"); var $checkBoxTD = $("

").append($checkBoxTD). append($nameTD).append($emailTD). append($phoneTD) .append($delTD).append($updateTD); $("#usertable tbody").append($tr); }); /** * 完成删除几行的功能 */ $("#deleteUser").click(function(){ if(window.confirm("您确认要删除吗?")){ /** * :checkBox 所有的checkBox * :not(#allCheckBox) 不包含id为allCheckBox * 被选中的 */ $(":checkBox:not(#allCheckBox):checked").parent().parent().remove(); } }); /** * 全选功能 */ $("#allCheckBox").click(function(){ if($(this).attr("checked")){ $(":checkBox:not(#allCheckBox)").attr("checked",true); }else{ $(":checkBox:not(#allCheckBox)").attr("checked",false); } }); /** * 完成修改操作 */ $("#updateUser").click(function(){ /** * 获取到修改的id的值，根据值去匹配table中的行 */ var idValue = $("#id_update").val(); var name_update = $("#name_update").val(); var email_update = $("#email_update").val(); var tel_update = $("#tel_update").val(); /** * 根据修改的id的值就定位某一行(td) */ $("td[id="+idValue+"]").siblings("td:eq(0)").text(name_update); $("td[id="+idValue+"]").siblings("td:eq(1)").text(email_update); $("td[id="+idValue+"]").siblings("td:eq(2)").text(tel_update); }); });

以上所述是小编给大家介绍的jQuery表格的维护和删除操作。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

jquery 表格的维护和删除