jQuery onclick删除表行

问题描述

如何在点击时删除表格行?

How to delete table row on click?

这是 jsfiddle .

我只想删除嵌套有del链接的行，而不要删除脚本现在正在执行的最后一行.

I want to delete only row on which del link is nested, not the last row how script is doing now.

onclick调用 delTableRow() 函数，需要更改该函数以删除嵌套的del链接行.

Onclick calling delTableRow() function and that function need to be changed to delete nested del link row.

<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>

推荐答案

删除onclick并替换为一个类(即class ="remove").将事件绑定到表上-与拥有大量事件处理程序相比，这将使您获得性能提升，并确保添加的新行也将遵守此行为.

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.

$('table').on('click','tr a.remove',function(e){
  e.preventDefault();
  $(this).closest('tr').remove();
});

这篇关于jQuery onclick删除表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！