使用jQuery隐藏当前表格行答案

【问题标题】：Hide current table row on click using jQuery使用jQuery隐藏当前表格行
【发布时间】：2011-05-31 09:34:58
【问题描述】：

我有一堆表格行，例如：

<tr>
  <td>cell1</td>
  <td>cell2</td>
  <td><a href="action.php">cell3</a></td>
</tr>

当有人点击 cell3 中的链接时，有没有办法隐藏整个 tr 行？那么当他们点击 cell3 中的链接时，整个 tr 都被隐藏了？

【问题讨论】：

标签： jquery html-table hide

【解决方案1】：

这是.delegate()的好地方，像这样：

$("#tableID").delegate("td:nth-child(3)", "click", function() {
  $(this).closest("tr").hide();
});

通过使用.delegate()，我们将一个 click 处理程序附加到所有第三列单元格的<table>，然后使用.closest() 爬到<tr> 到.hide()。如果你想要它在链接上，只需将td:nth-child(3)更改为td a，其余相同。

【讨论】：

nth-child 是一个 CSS3 选择器，所以如果你想要向后兼容我不建议使用它。
我认为 jQuery 不直接使用底层 CSS3 选择器，我可能错了，但我认为即使没有 CSS3 也应该可以工作？
@Seth：这看起来像 CSS 吗？
嗯，是的 - 它看起来确实像 CSS。 jQuery 使用 CSS 选择器来处理大多数事情，例如 nth-child()、last() 等……但 parent() 和 children() 之类的东西会解析 DOM。
@Seth：我从未见过可以处理事件的 CSS。 jQuery/Sizzle 使用基于 javascript 的 CSS 选择器引擎。如果可用，它使用 DOM API querySelectorAll 方法。当不可用时，它会模仿其行为。都是javascript。

【解决方案2】：

只需简单地使用 jQuery 并隐藏父级。

$('td.hide_on_click').live('click', function(){
  // PICK ONE OF THESE:
  $(this).parent('tr').remove(); //completely destroy the tr (remove from DOM)
  $(this).parent('tr').hide(); //just hide it from the user
});

删除 a 标签。如果您希望它具有“链接外观”，请为可点击的内容添加 css 样式：

.clickable {
  cursor: pointer;
  cursor: hand;
}

然后：

<table>
  <tr>
    <td></td>
    <td></td>
    <td class="hide_on_click clickable">delete</td>
  </tr>
</table>

【讨论】：

【解决方案3】：

你好，这是我的解决方案

$(document).on("click", "td:nth-child(3)", function () {
      if (confirm("Are you sure ?")) {
          $(this).closest("tr").hide();
      }
  });

【讨论】：

【解决方案4】：

是的

$('td a').click(function() {
    $(this).parent().parent().hide();
});

【讨论】：

这不会隐藏任何东西，因为 immediate 父级不是 <tr> :)
是的，我似乎总是认为parent('selector') 的行为与它实际（显然）的行为方式略有不同。
-1 这不符合他的要求。这仅适用于链接。如果单元格有大量填充，则单击单元格将无济于事 - 他们必须单击链接。此外，它也适用于他制作的每张桌子。我不认为他希望在每次点击链接时消失
首先我要回答最初的问题When someone clicks the link in cell3 is there a way to hide the whole tr row?。而且我的解决方案只展示了预期的效果，提问者显然简化了 HTML，因此我提供了一个匹配的简化答案。