Question

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

我想只删除嵌套del链接的行，而不是脚本现在执行的最后一行。

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>

Answer 1

删除onclick并替换为类（即class =“remove”）。将事件绑定到表 - 这将使您获得比使用大量事件处理程序更高的性能，并确保添加的新行也将遵循此行为。

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

Answer 2

$('td a').on('click',function(e){
   //delete code.
   e.preventDefault();
   $(this).parent().parent().remove(); // OR $(this).parents('tr').remove();
});

Answer 3

删除所有内联javascript并使用点击事件....无需在attr中调用onclick事件...这应该是他的技巧.. $(this).parents('tr').remove();

试试这个

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

working fiddle here

Answer 4

$('td a').on('click',function(){
   e.preventDefault();
   $(this).parent().parent().remove();
});

Answer 5

使用

$(this).parent().parent().remove();

关于锚标签的

。因此，如果您的链接是td的子节点，这是tr的子节点，那么tr将被删除。

Answer 6

正如@Ian Wood 提到的，我们可以使用 .closest() 返回第一个祖先，或者最接近我们删除按钮的元素，并使用 .remove() 删除元素。

这是我们如何使用 jQuery click 事件而不是使用 JavaScript onclick 来实现它。

HTML：

<table id="myTable">
<tr>
  <th width="30%" style="color:red;">ID</th>
  <th width="25%" style="color:red;">Name</th>
  <th width="25%" style="color:red;">Age</th>
  <th width="1%"></th>
</tr>

<tr>
  <td width="30%" style="color:red;">SSS-001</td>
  <td width="25%" style="color:red;">Ben</td>
  <td width="25%" style="color:red;">25</td>
  <td><button type='button' class='btnDelete'>x</button></td>
</tr>

<tr>
  <td width="30%" style="color:red;">SSS-002</td>
  <td width="25%" style="color:red;">Anderson</td>
  <td width="25%" style="color:red;">47</td>
  <td><button type='button' class='btnDelete'>x</button></td>
</tr>

<tr>
  <td width="30%" style="color:red;">SSS-003</td>
  <td width="25%" style="color:red;">Rocky</td>
  <td width="25%" style="color:red;">32</td>
  <td><button type='button' class='btnDelete'>x</button></td>
</tr>

<tr>
  <td width="30%" style="color:red;">SSS-004</td>
  <td width="25%" style="color:red;">Lee</td>
  <td width="25%" style="color:red;">15</td>
  <td><button type='button' class='btnDelete'>x</button></td>
</tr>

jQuery

 $(document).ready(function(){
     $("#myTable").on('click','.btnDelete',function(){
         $(this).closest('tr').remove();
      });
  });

在 JSFiddle 中试试：click here。

jQuery onclick删除表格行

6 个答案: