Question

我有一张这样的表：

<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。我写过这个剧本：

$(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).next("tr").toggle();
        $(this).toggleClass("up");
    });
});

但这不能显示或隐藏tr。我该怎么解决这个问题。感谢

Answer 1

如果你在next（）之前调用nearest（），你将获得箭头的TR，然后next（）将选择该行之后的行。

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

Answer 2

使用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");
    });
});

Answer 3

这样做，我删除了你的隐藏和显示代码，因为它使所有的行都不显示在首位。

你需要做的是从你的箭头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：http://jsfiddle.net/SLc5d/

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

3 个答案: