如何用jquery实现动态删除表格行
展开全部
这个问题我需要用一段代码来实现，步骤如下：
1.把相关的标签写上
<pre class="html" name="code"><!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 (){
2.然后，先获取文本框的值
var $name=$("#name").val();
var $email=$("#email").val();
var $phone=$("#phone").val();
3.创建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");
4.如果在函数内部进行删除，直接使用click即可
$(".lj").click(function (){
5.$(this)获取的是点击的对象，点击的对象是a标签，a标签的上一级的上一级是tr
$(this).parent().parent().remove();
})
});
/*
6.最后，如果在外部进行删除 ，需要使用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>
</pre><pre class="html" name="code">parent：查找每个段落的父元素</pre><pre class="html" name="code">live:live() 方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。</pre><pre class="html" name="code">传递给 .live() 的事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处理函数，绑定在 DOM 树的根节点上。</pre><pre class="html" name="code">live应用小例子：<body> <div class="clickme">Click here</div></body></pre><pre class="html" name="code">可以给这个元素绑定一个简单的click事件：</pre><pre class="html" name="code"> $('.clickme').bind('click', function() { alert("Bound handler called.");});</pre><pre class="html" name="code">当点击了元素，就会弹出一个警告框。然后，想象一下这之后有另一个元素添加进来了。</pre><pre class="html" name="code"> $('body').append('<div class="clickme">Another target</div>');</pre><pre class="html" name="code">尽管这个新的元素也能够匹配选择器 ".clickme" ，但是由于这个元素是在调用 .bind() 之后添加的，所以点击这个元素不会有任何效果。 </pre><pre class="html" name="code">.live() 就提供了对应这种情况的方法。</pre><pre class="html" name="code">如果我们是这样绑定click事件的： </pre><pre class="html" name="code">$('.clickme').live('click', function() { alert("Live handler called."); });然后再添加一个新元素： $('body').append('<div class="clickme">Another target</div>');</pre><pre class="html" name="code">然后再点击新增的元素，他依然能够触发事件处理函数。 </pre><br>
<pre></pre>
<br>
以上步骤就能实现动态删除表格行
1.把相关的标签写上
<pre class="html" name="code"><!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 (){
2.然后，先获取文本框的值
var $name=$("#name").val();
var $email=$("#email").val();
var $phone=$("#phone").val();
3.创建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");
4.如果在函数内部进行删除，直接使用click即可
$(".lj").click(function (){
5.$(this)获取的是点击的对象，点击的对象是a标签，a标签的上一级的上一级是tr
$(this).parent().parent().remove();
})
});
/*
6.最后，如果在外部进行删除 ，需要使用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>
</pre><pre class="html" name="code">parent：查找每个段落的父元素</pre><pre class="html" name="code">live:live() 方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。</pre><pre class="html" name="code">传递给 .live() 的事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处理函数，绑定在 DOM 树的根节点上。</pre><pre class="html" name="code">live应用小例子：<body> <div class="clickme">Click here</div></body></pre><pre class="html" name="code">可以给这个元素绑定一个简单的click事件：</pre><pre class="html" name="code"> $('.clickme').bind('click', function() { alert("Bound handler called.");});</pre><pre class="html" name="code">当点击了元素，就会弹出一个警告框。然后，想象一下这之后有另一个元素添加进来了。</pre><pre class="html" name="code"> $('body').append('<div class="clickme">Another target</div>');</pre><pre class="html" name="code">尽管这个新的元素也能够匹配选择器 ".clickme" ，但是由于这个元素是在调用 .bind() 之后添加的，所以点击这个元素不会有任何效果。 </pre><pre class="html" name="code">.live() 就提供了对应这种情况的方法。</pre><pre class="html" name="code">如果我们是这样绑定click事件的： </pre><pre class="html" name="code">$('.clickme').live('click', function() { alert("Live handler called."); });然后再添加一个新元素： $('body').append('<div class="clickme">Another target</div>');</pre><pre class="html" name="code">然后再点击新增的元素，他依然能够触发事件处理函数。 </pre><br>
<pre></pre>
<br>
以上步骤就能实现动态删除表格行
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
