使用jquery在图像后显示/隐藏tr

我有一张这样的桌子：

<table id="tbl">
     <tr><th>My Table</th></tr>
     <tr><td><div class="arrow"></div></td></tr>
     <tr><td>The second row</td></tr>
</table>

但这不能显示或隐藏tr。我如何才能解决这个问题。 谢谢

使用

parents（“tr:first”）

沿着链向上走，选择div的父级

tr

，然后它应该可以工作。应该注意的是，您可能希望对其他调用/设置进行一些选择器优化

$(document).ready(function() {
    $("#tbl tr:odd").addClass("odd");
    $("#tbl tr:even").addClass("even");
    $("#tbl tr:not(.odd)").hide();
    $("#tbl tr:first-child").show();
    $('.arrow').click(function(){
      $(this).parents("tr:first").next("tr").toggle();
      $(this).toggleClass("up");
    });
});

使用

parents（“tr:first”）

沿着链向上走，选择div的父级

tr

，然后它应该可以工作。应该注意的是，您可能希望对其他调用/设置进行一些选择器优化

$(document).ready(function() {
    $("#tbl tr:odd").addClass("odd");
    $("#tbl tr:even").addClass("even");
    $("#tbl tr:not(.odd)").hide();
    $("#tbl tr:first-child").show();
    $('.arrow').click(function(){
      $(this).parents("tr:first").next("tr").toggle();
      $(this).toggleClass("up");
    });
});

---

如果在next（）之前调用next（），将得到箭头的TR，然后next（）将选择该箭头后面的行

$(this).closest("tr").next().toggle();

---

如果在next（）之前调用next（），将得到箭头的TR，然后next（）将选择该箭头后面的行

$(this).closest("tr").next().toggle();

---

这样就可以了，我去掉了隐藏和显示代码，因为它让所有的行一开始都不显示

您需要做的是从arrow div获取closes tr，然后从该div获取下一个tr

$(document).ready(function() {
    $("#tbl tr:odd").addClass("odd");
    $("#tbl tr:even").addClass("even");

    $('.arrow').click(function(){
        $(this).closest('tr').next("tr").toggle();
        $(this).toggleClass("up");
    });
});

---

jsfiddle:

这样就可以了，我去掉了隐藏和显示代码，因为它让所有的行一开始都不显示

您需要做的是从arrow div获取closes tr，然后从该div获取下一个tr

$(document).ready(function() {
    $("#tbl tr:odd").addClass("odd");
    $("#tbl tr:even").addClass("even");

    $('.arrow').click(function(){
        $(this).closest('tr').next("tr").toggle();
        $(this).toggleClass("up");
    });
});

jsfiddle：