jquery删除<tr>
发布网友
发布时间:2022-04-22 06:24
我来回答
共4个回答
热心网友
时间:2022-04-23 12:34
jquery删除指定的tr可以参考以下的方法:
1、在button 的onclick事件中直接将this传过去:removeColunm(this);
2、在事件中,this.parent():代表获取到td ,this.parent().parent():代表获取到tr。
function removeColumn(thisbutton){
$(thisbutton).parent().parent().remove();
}
扩展资料:
常用的 jQuery 事件方法
$(document).ready()
$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在jQuery 语法章节中已经提到过。
click()
click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
在下面的实例中,当点击事件在某个 <p> 元素上触发时,隐藏当前的 <p> 元素:
$("p").click(function(){
$(this).hide();});
dblclick()
当双击元素时,会发生 dblclick 事件。
参考资料来源:百度百科-jQuery
热心网友
时间:2022-04-23 13:52
可以直接通过remove的方法进行删除,通过append方法进行添加。
举例:
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script>
$(function(){
$("#getAtr").click(function(){
$str='';
$str+="<tr align='center'>";
$str+="<td><input type='text' name='advTitle[]'/></td>";
$str+="<td><input type='file' name='img[]' /></td>";
$str+="<td><input type='text' name='advContent[]' /></td>";
$str+="<td><input type='text' name='advSource[]' /></td>";
$str+="<td><input type='text' name='advAuthor[]' /></td>";
$str+="<td><input type='text' name='advPosition[]' /></td>";
$str+="<td onClick='getDel(this)'><a href='#'>删除追加</a></td>";
$str+="</tr>";
$("#addTr").append($str);
});
});
function getDel(k){
$(k).parent().remove();
}
</script>
--------------------------------------------------------------------------------
html部分
<table align="center" border="1" cellpadding="0" cellspacing="0" width="100%">
<tr align="center">
<td>广告名称</td>
<td>广告图片</td>
<td>广告内容</td>
<td>广告来源</td>
<td>广告作者</td>
<td>广告描述</td>
<td align="center"><a href="#" id="getAtr">追加内容</a></td>
</tr>
<tbody id="addTr">
<tr align="center">
<td><input type="text" name="advTitle[]"/></td>
<td><input type="file" name="img[]" /></td>
<td><input type="text" name="advContent[]" /></td>
<td><input type="text" name="advSource[]" /></td>
<td><input type="text" name="advAuthor[]" /></td>
<td><input type="text" name="advPosition[]" /></td>
<td></td>
</tr>
</tbody>
<tr align="center">
<td colspan="5"><input type="submit" value="全部添加" /></td>
</tr>
</table>
热心网友
时间:2022-04-23 15:27
jQ删除<tr>,代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style type="text/css">
body,ul,li{margin:0; padding:0; font-size:12px; line-height:20px; list-style:none; font-family:Verdana, Geneva, sans-serif}
table{width:600px; border-collapse:collapse}
th,td{border:1px #d0d0d0 solid; padding:5px 10px; font-size:14px; font-weight:lighter}
.btn01{padding:5px 20px; background-color:#09c; text-align:center; color:#fff; font-size:13px; cursor:pointer; border:0}
.btn01:hover{background-color:#f63}
</style>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".btn01").click(function(){
$("tbody tr:last").remove()
});
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Something</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>Jcllince01</td>
<td>Something</td>
</tr>
<tr>
<td>02</td>
<td>Jcllince02</td>
<td>Something</td>
</tr>
<tr>
<td>03</td>
<td>Jcllince03</td>
<td>Something</td>
</tr>
<tr>
<td colspan="3"><input class="btn01" type="button" value="删除我" /></th>
</tr>
</tbody>
</table>
</body>
</html>
希望能帮到你
追问这个是默认直接删除最后一行是吧,有没有方法能实现删除中间行,然后重置控件的ID呢
追答请问你具体要实现什么效果?
热心网友
时间:2022-04-23 17:18
$(this).closest("tr").remove();
$(this)表示你当前点击的这个button
希望能帮助到你追问这个删除功能我是实现了的,现在是想看看可以用什么办法在删除了这一行之后,将剩余行的编号重新整理下