显示/隐藏TR与jQuery

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

使用走上链，并选择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 2

，如果你的next（）之前把在呼叫最接近（），你会得到的箭头，TR，然后下一个（）会后选择行。

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

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/