Question

我有一堆表行，例如：

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

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

Answer 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，其余内容相同。

Answer 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
});

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

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

然后：

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

Answer 3

这是我的解决方案

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

Answer 4

烨

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

使用jQuery在单击时隐藏当前表行

4 个答案: