jQuery表格的维护和删除操作

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

<！DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script language="JavaScript" src="../js/jquery-1.4.2.js"></script><title>添加用户</title> </head> <script src="user.js"></script> <body><center> <br><br> 添加用户:<br><br> 姓名: <input type="text" name="name" id="name" />   email: <input type="text" name="email" id="email" />   电话: <input type="text" name="tel" id="tel" /><br><br> <button id="addUser">提交</button> <button id="deleteUser">删除选中</button> <br><br> <hr> <br><br> <table id="usertable" border="1" cellpadding="5" cellspacing=0><tbody> <tr><th><input type="checkbox" id="allCheckbox"/></th><th>姓名</th><th>email</th><th>电话</th><th>修改</th><th>删除</th> </tr></tbody> </table> <br> <br> <br> <hr> 修改用户:<br><br> 姓名: <input type="text" name="name" id="name_update" />   email: <input type="text" name="email" id="email_update" />   电话: <input type="text" name="tel" id="tel_update" /><br><br> <input type="hidden" id="id_update"/> <button id="updateUser">提交</button></center> </body></html>

页面展示

这里写图片描述
js后台代码

$（）.ready（function（）{ var index = 1; /*** 完成添加功能*/ $（"#addUser"）.click（function（）{/** * 1、获取姓名,电话,email的值 * 2、创建 *<tr> * <td><input type="checkbox"></td> * <td>${姓名}</td> * <td>${email}</td> * <td>${phone}</td> * <td><a>修改</a></td> * <td><a>删除</a></td> *</tr> * 3、把创建完成的tr追加到tbody上 */var name = $（"#name"）.val（）;var email = $（"#email"）.val（）;var tel = $（"#tel"）.val（）;var $checkbox = $（"<input/>"）.attr（"type","checkbox"）;var $checkboxTD = $（"<td/>"）.append（$checkbox）;$checkboxTD.attr（"id",index）;index++;var $nameTD = $（"<td/>"）.text（name）;var $emailTD = $（"<td/>"）.text（email）;var $phoneTD = $（"<td/>"）.text（tel）;var $updateA = $（"<a/>"）.text（"修改"）;/** * 完成修改的功能 */$updateA.css（"cursor","pointer"）;/** * 给修改的超级链接添加click事件 */$updateA.click（function（）{ var name = $（this）.parent（）.siblings（"td:eq（1）"）.text（）; var email = $（this）.parent（）.siblings（"td:eq（2）"）.text（）; var tel = $（this）.parent（）.siblings（"td:eq（3）"）.text（）; var id = $（this）.parent（）.siblings（"td:eq（0）"）.attr（"id"）; $（"#name_update"）.val（name）; $（"#email_update"）.val（email）; $（"#tel_update"）.val（tel）; $（"#id_update"）.val（id）;}）;var $updateTD = $（"<td/>"）.append（$updateA）;var $delA = $（"<a/>"）.text（"删除"）;$delA.css（"cursor","pointer"）;$delA.click（function（）{//完成删除本行的功能 if（window.confirm（"您确认要删除吗?"））{$（this）.parent（）.parent（）.remove（）;}}）;var $delTD = $（"<td/>"）.append（$delA）;var $tr = $（"<tr/>"）.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表格的维护和删除操作，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！