jQuery onclick删除表行

如何在单击时删除表行

这是一本书

我只想删除嵌套了del-link的行，而不是脚本现在所做的最后一行

单击调用

delTableRow（）

函数，需要更改该函数以删除嵌套的dellink行

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

函数addTableRow（jQtable）{
jQtable.each（函数（）{
var tds=“”；
each（$（'tr:last td'，this），function（）{tds+=''+$（this.html（）+''；}）；
tds+=''；
如果（$（'tbody'，this.length>0）{$（'tbody'，this.append（tds）；
}else{$（this.append（tds）；}
});
}
函数delTableRow（jQtable）{
jQtable.each（函数（）{
$（'tr:last'，this.remove（）；
});
}
11
12
13
21
22
23
31
32
33

删除所有内联javascript并使用click event。。。。无需在属性中调用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>

$（函数（）{
$（'table'）。在（'click'，'tra'，函数（e）上{
e、 预防默认值（）；
$（this.parents（'tr'）.remove（）；
});
});
11
12
13
//---^---这里删除所有..的onclick内联函数。。
....

---

删除所有内联javascript并使用click event。。。。无需在属性中调用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>

$（函数（）{
$（'table'）。在（'click'，'tra'，函数（e）上{
e、 预防默认值（）；
$（this.parents（'tr'）.remove（）；
});
});
11
12
13
//---^---这里删除所有..的onclick内联函数。。
....

使用

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

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

使用

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

---

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

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

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

---

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

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

---

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

这就是我们如何使用jqueryclick事件来实现它，而不是使用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>
                            

---

在JSFiddle:.

中尝试一下，正如@Ian Wood提到的，我们可以使用.closest（）返回第一个祖先，或者最接近我们的delete按钮，并使用.remove（）删除元素

这就是我们如何使用jqueryclick事件来实现它，而不是使用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>
                            

---

在JSFiddle:.中尝试一下。

这里的小提示：更好的方法是让所有家长都选择td家长。。这样，如果删除按钮是div的子项，它仍然会删除td而不是div..你似乎没有理解我的意思。。我的意思是这个

.parents（tr）

又小又小effective@codeiz这也是对的，但是OP对jQuery来说是新的，所以最好不要和他混在一起，所以我给了它parent.parent…让我重新编辑它，因为parents（'tr'）仍然很危险-如果表在另一个表中呢？然后，您还将删除父表的containing tr元素，该元素包含您要保留的信息。@DipeshParmar不要将其视为个人信息-这个地方是为了提高我们的技能（我经常使用它！）但我们必须指出解决方案的不足之处，否则发布该解决方案的人将在这篇文章中继续下去，而不知道他们的代码可以改进到哪里。这里的小贴士：更好的办法是让所有家长都参与进来，并选择td家长。。这样，如果删除按钮是div的子项，它仍然会删除td而不是div..你似乎没有理解我的意思。。我的意思是这个

.parents（tr）

又小又小effective@codeiz这也是对的，但是OP对jQuery来说是新的，所以最好不要和他混在一起，所以我给了它parent.parent…让我重新编辑它，因为parents（'tr'）仍然很危险-如果表在另一个表中呢？然后，您还将删除父表的containing tr元素，该元素包含您要保留的信息。@DipeshParmar不要将其视为个人信息-这个地方是为了提高我们的技能（我经常使用它！）但我们必须指出解决方案的不足之处——否则发布该解决方案的人将在不知道他们的代码可以改进的地方继续使用该解决方案。