Скрыть текущую строку таблицы при клике, используя jQuery

Question

У меня есть несколько строк таблицы, например:

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

Когда кто-то нажимает на ссылку в ячейке 3, есть ли способ скрыть всю строку 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();
});