使用 jQuery 隐藏表行 onclick

发布于 2024-10-09 13:10:31 字数 677 浏览 4 评论 0原文

我有一堆表行，例如：

<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，如果它存在，那么如何隐藏 tr 及其下面的 Notes_row 类，而不影响使用 jquery 的其他行？因此，如果有人单击 cell3，则该链接所在的 tr 会被隐藏，那么如果其下方有一个注释表行，它也会隐藏该行。

原文

I have a bunch of table rows such as:

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

The class="notes_row" is only there if notes are present for the row above it. How can I hide the tr and if its there the tr with the notes_row class below it without affecting the other rows using jquery? So if someone clicked cell3 the tr that link is in is hidden then if there is a notes table row below it, it hides that as well.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

鹤舞 2024-10-16 13:10:31

$('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/

$('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;
});

I think... Going by memory here.

EDIT

Couple minor fixes, and a fiddle link to see it in action:

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

回复收藏 0 原文

意犹 2024-10-16 13:10:31

这将是 .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
});

您可以在这里测试。它的作用是使用 .closest() 爬到 <代码>, .hide()该行，选择 .next() ; if 它具有 .notes_row 类，并且 .hide() 也是如此。最后我在那里添加 event.preventDefault()所以我们实际上并没有从链接本身导航到 action.php。

This would be a good place for .delegate(), it can be as simple as:

$("#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. What this does is use .closest() to climb up to the <tr>, .hide() that row, select the .next() <tr> if it has the .notes_row class, and .hide() that as well. Finally I'm adding a event.preventDefault() on there so we don't actually navigate to action.php from the link itself.