jQuery onclick 删除表格行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15474139/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery onclick delete table row
提问by user1942505
How to delete table row on click?
如何在单击时删除表格行？
Here is a jsfiddle.
这是一个jsfiddle。
I want to delete only row on which del link is nested, not the last row how script is doing now.
我只想删除嵌套了 del 链接的行，而不是脚本现在执行的最后一行。
Onclick calling delTableRow()function and that function need to be changed to delete nested del link row.
Onclick 调用delTableRow()函数，该函数需要更改以删除嵌套的 del 链接行。
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function addTableRow(jQtable){
jQtable.each(function(){
var tds = '<tr>';
jQuery.each($('tr:last td', this), function() {tds += '<td>'+$(this).html()+'</td>';});
tds += '</tr>';
if($('tbody', this).length > 0){$('tbody', this).append(tds);
}else {$(this).append(tds);}
});
}
function delTableRow(jQtable){
jQtable.each(function(){
$('tr:last', this).remove();
});
}
</script>
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="mans">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td><a onclick="delTableRow($('#mans'));" href="#">del</a></td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td><a onclick="delTableRow($('#mans'));" href="#">del</a></td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td><a onclick="delTableRow($('#mans'));" href="#">del</a></td>
</tr>
</table>
回答by Ian Wood
remove the onclick and replace with a class (ie. class="remove"). bind the event to the table - this will give you a performance gain over having lots of event handlers and make sure that new rows added will obey this behaviour too.
删除 onclick 并替换为一个类（即 class="remove"）。将事件绑定到表 - 与拥有大量事件处理程序相比，这将使您获得性能提升，并确保添加的新行也将遵守此行为。
$('table').on('click','tr a.remove',function(e){
e.preventDefault();
$(this).closest('tr').remove();
});
回答by Dipesh Parmar
$('td a').on('click',function(e){
//delete code.
e.preventDefault();
$(this).parent().parent().remove(); // OR $(this).parents('tr').remove();
});
回答by bipen
remove all your inline javascript and use click event.... no need to call onclick event in the attr... and this should dot he trick.. $(this).parents('tr').remove();
删除所有内联 javascript 并使用 click 事件......无需在 attr 中调用 onclick 事件......这应该是他的技巧...... $(this).parents('tr').remove();
try this
尝试这个
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
<script type="text/javascript">
$(function(){
$('table').on('click','tr a',function(e){
e.preventDefault();
$(this).parents('tr').remove();
});
});
</script>
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="mans">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td><a href="#">del</a></td>
//---^---here remove the onclick inline function for all..
</tr>
....
</table>
回答by mavili
Use
用
$(this).parent().parent().remove();
on the anchor tags. So if your link is a child of a td, which is a child of tr, then tr will be removed.
在锚标签上。因此，如果您的链接是 td 的子级，即 tr 的子级，则 tr 将被删除。
回答by K D
$('td a').on('click',function(){
e.preventDefault();
$(this).parent().parent().remove();
});
