jquery - jQuery onclick 删除表格行

Question

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

这是一个jsfiddle。

我只想删除嵌套 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

删除所有内联javascript并使用click事件..无需在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>

在这里工作小提琴

Answer 3

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

Answer 4

利用

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

在锚标签上。因此，如果您的链接是 td 的子项，它是 tr 的子项，则 tr 将被删除。

Answer 5

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

Answer 6

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

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

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

table{
  width: 100%;
  border-collapse: collapse;
}

table td{
  border: 1px solid black;
}
button:hover{
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
<tr>
  <th>ID</th>
  <th >Name</th>
  <th>Age</th>
  <th width="1%"></th>
</tr>

<tr>
  <td >SSS-001</td>
  <td >Ben</td>
  <td >25</td>
  <td><button type='button' class='btnDelete'>x</button></td>
</tr>

<tr>
  <td >SSS-002</td>
  <td >Anderson</td>
  <td >47</td>
  <td><button type='button' class='btnDelete'>x</button></td>
</tr>

<tr>
  <td >SSS-003</td>
  <td >Rocky</td>
  <td >32</td>
  <td><button type='button' class='btnDelete'>x</button></td>
</tr>

<tr>
  <td >SSS-004</td>
  <td >Lee</td>
  <td >15</td>
  <td><button type='button' class='btnDelete'>x</button></td>
</tr>