Question

我有一堆表行，例如：

<tr>
  <td>cell1</td>
  <td>cell2</td>
  <td><a href="action.php">cell3</a></td>
</tr>
<tr class="notes_row">
<td colspan="6">
<ul class="message warning no-margin" id="notes_box">
<li>Notes here</li>
</ul>
</td>
</tr>
<tr>
  <td>cell1</td>
  <td>cell2</td>
  <td><a href="action.php">cell3</a></td>
</tr>

只有当上面的行有注释时，才会出现class =“notes_row”。如何隐藏tr，如果它在那里有一个带有notes_row类的tr而不影响其他行使用jquery？因此，如果有人点击了cell3，那么链接所在的tr就会被隐藏，那么如果它下方有一个注释表行，它也会隐藏它。

Answer 1

$('a[href=action.php]').click(function(){  // ... or however you attach to that link
    var row = $(this).closest('tr');

    // hide this row first
    row.hide();

    // next, get the next TR, see if it is a notes row, and hide it if it is
    var nxt = row.next();
    if (nxt.hasClass('notes_row'))
      nxt.hide();

    // stop link
    return false;
});

我想......在这里记忆。

修改

一些小修正，以及一个小提琴链接，可以看到它的实际效果：

http://www.jsfiddle.net/E6zcV/

Answer 2

这对于.delegate()来说是一个好地方，它可以简单到：

$("#tableID").delegate("a[href='action.php']", "click", function(e) {
  $(this).closest("tr").hide().next("tr.notes_row").hide();
  e.preventDefault(); //don't follow the action.php href
});

You can test it out here。这样做是使用.closest()爬上<tr>，.hide()该行，选择.next() <tr> 如果它有.notes_row类和.hide()。最后我在那里添加event.preventDefault()，因此我们实际上并未从链接本身导航到action.php。

使用jQuery隐藏表行onclick

2 个答案: