jquery实现动态添加和删除表格

原创 2012年03月22日 21:07:07
<!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>');
然后再点击新增的元素,他依然能够触发事件处理函数。  



相关文章推荐

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jQuery动态添加删除表格的行和列

" /> .cl1{ background-color:#FFFFFF; } .cl2{ background-color:#FFFF99; } var rowCount = 0; var c...

一个简单的jQuery例子,动态添加表格和删除

一个简单的jQuery例子,动态添加表格和删除

jQuery实现表格行的动态增加与删除(改进版)

http://www.blogjava.net/absolutedo/archive/2009/03/13/259488.html

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jQuery动态增加表格一行和删除一行

今天在处理表格的动态增加一行,和删除一行,一开始用js,但是写起来有点复杂,而且不好控制,最后还是用了jQuery,很轻松的就搞定了,代码如下: $(document).ready(function...

jQuery实现表格行的动态增加与删除

1 2 3 4 5 6 7 8 $(document).ready(function(){ 9 //居中 10 $("#tab tr").attr("...

jQuery实现表格行的动态增加与删除

在项目中很多时候遇到这样的问题,需要动态的增加、删除表格的行,很多情况下我们都是在页面来设置一个隐藏域的值,然后在js方法里动态的++或--,在学习jQuery的过程中,我试着用简单的方法来模拟实现这...

jquery实现动态生成表格

  • 2013年11月13日 11:28
  • 787B
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery实现动态添加和删除表格
举报原因:
原因补充:

(最多只允许输入30个字)