jquery实现动态添加和删除表格
2012-03-22 21:07
1096 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script language="javascript" type="text/javascript" src="../20120319/include/jquery.js"></script> <script language="javascript" type="text/javascript" > $(document).ready(function (){ $("#submit").click(function (){ //先获取文本框的值 var $name=$("#name").val(); var $email=$("#email").val(); var $phone=$("#phone").val(); //创建tr、td并且把内容放入td中 var $tr=$("<tr><td>"+$name+"</td><td>"+$email+"</td><td>"+$phone+"</td><td><a href='#' class='lj'>DELETE</a></td></tr>"); $tr.appendTo("#table"); //如果在函数内部进行删除,直接使用click即可 $(".lj").click(function (){ //$(this)获取的是点击的对象,点击的对象是a标签,a标签的上一级的上一级是tr $(this).parent().parent().remove(); }) }); /* //如果在外部进行删除 ,需要使用live进行删除 $(".lj").live("click",function (){ //删除 $(this).parent().parent().remove(); }); */ }); </script> </head> <body> <div style="background-color:#CCC; width:700px; height:500px; margin-left:300px;"> <form > <p align="center">添加用户:</p></td> 姓名:<input type="text" id="name" /> email:<input type="text" id="email" /> 电话:<input type="text" id="phone" /><br /><br /> <p align="center"><input type="button" id="submit" value="提交" /></p> <br /><br /> </form> <hr color="#FFFFFF" /><br /> <table width="600" border="1" id="table" bordercolor="#FFFFFF" align="center"> <tr id="top"> <td>姓名</td> <td>email</td> <td>电话</td> <td>删除</td> </tr><br /> </table> </div> </body> </html>
parent:查找每个段落的父元素
live:live() 方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。
传递给 .live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。
live应用小例子:<body> <div class="clickme">Click here</div></body>
可以给这个元素绑定一个简单的click事件:
$('.clickme').bind('click', function() { alert("Bound handler called.");});
当点击了元素,就会弹出一个警告框。然后,想象一下这之后有另一个元素添加进来了。
$('body').append('<div class="clickme">Another target</div>');
尽管这个新的元素也能够匹配选择器 ".clickme" ,但是由于这个元素是在调用 .bind() 之后添加的,所以点击这个元素不会有任何效果。
.live() 就提供了对应这种情况的方法。
如果我们是这样绑定click事件的:
$('.clickme').live('click', function() { alert("Live handler called."); });然后再添加一个新元素:$('body').append('<div class="clickme">Another target</div>');
然后再点击新增的元素,他依然能够触发事件处理函数。
相关文章推荐
- jQuery实现的简单动态添加、删除表格功能示例
- jQuery实现表格行和列的动态添加与删除方法【测试可用】
- JQUERY动态绘制表格,实现动态添加一行,删除一行
- jquery 实现表格内的tr与td,动态添加与删除. 以及序号增加与减少,大多用在Form里
- 使用jquery实现表格的动态添加和删除
- jQuery实现表单动态添加与删除数据操作示例
- jQuery动态添加删除select项(实现代码)
- jquery表格动态添加删除
- Android表格布局TableLayout简单实现(Java动态添加,设置边框,删除数据(单行,多行))
- JS实现动态表格的添加,修改,删除功能(推荐)
- jQuery表格操作添加行、删除行和动态移动
- Jquery动态删除添加表格中的内容
- JQuery实现动态添加删除评论的方法
- jQuery实现用户信息表格的添加和删除功能
- JavaScript动态实现表格添加、删除、插入、上移、下移一行功能
- jquery 动态添加、按顺序添加input文本框并且实现删除操作
- jquery实现table动态添加行、删除行以及行的上移和下移
- jquery实现表格动态添加
- js实现动态添加、删除行、onkeyup表格求和示例
- jquery实现table动态添加行、删除行以及行的上移和下移