使用jquery给指定的table动态添加一行、删除一行
413
2024-02-15
本文实例讲述了jQuery实现动态添加tr到table的方法。分享给大家供大家参考,具体如下:
运行效果图如下:
完整代码如下:
<!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"> <title>添加用户</title> <script type="text/javascript" src="http://www.gimoo.net/t/1810/jquery-1.4.2.min.js"></script> </head> <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> <br><br> <hr> <br><br> <table id="usertable" border="1" cellpadding="5" cellspacing=0> <tbody> <tr> <th>姓名</th> <th>email</th> <th>电话</th> <th> </th> </tr> <tr> <td>Tom</td> <td>tom@tom.com</td> <td>5000</td> <td><a href="http://www.gimoo.net/t/1810/deleteEmp&">Delete</a></td> </tr> <tr> <td>Jerry</td> <td>jerry@sohu.com</td> <td>8000</td> <td><a href="http://www.gimoo.net/t/1810/deleteEmp&">Delete</a></td> </tr> </tbody> </table> </center> </body> <script> $(document).ready(function(){ $("#addUser").click(function(){ var name = $("#name").val(); var email = $("#email").val(); var tel = $("#tel").val(); var $tr = $("<tr>"+ "<td>"+name+"</td>"+ "<td>"+email+"</td>"+ "<td>"+tel+"</td>"+ "<td><a href='http://www.gimoo.net/t/1810/deleteEmp&"+name+"'>删除</a></td>" +"</tr>"); var $table = $("#usertable"); $table.append($tr); $tr.children().children().click(function(){ //alert($(domEle).parent().parent().children(":first").text()); //方法1. // $(domEle).parent().parent().remove(); // return false; //方法2. return deleteTr($tr); }); //不能在这里 给每个<a> 加事件 ,每add一次就each一次,会重复弹出confirm // $("tr td a").each(function(index,domEle){ // $(domEle).click(function(){ // //alert($(domEle).parent().parent().children(":first").text()); // //方法1. //// $(domEle).parent().parent().remove(); //// return false; // //方法2. // return deleteTr($(domEle).parent().parent()); // }); // // }); }); function deleteTr(aObject) { var flag = window.confirm("您确定要删除"+aObject.children(":first").text()+"名称的值吗?"); // alert(flag); if(!flag){ return false; } else { aObject.remove(); return false; } return false; } }) </script> </html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
#免责声明#
本站[绿夏技术导航]提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序或内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件[admin@lxwl520.com]与我们联系进行删除处理。敬请谅解!