使用jQuery展开某个表中的某些行

Question

我有一个表并希望使某些行可展开 - 单击一行可以展开该父行下的其他几行。不是所有的行都应该是可扩展的。 jQuery将会很好。任何人都可以告诉我如何实现这个目标或指向一本手册吗？

谢谢。

Answer 1

我们曾在我的工作在一个项目上的类似要求。这是我在jsfiddle上做的一个快速样本。

<table> 
    <tbody> 
     <tr class="main"> 
      <td > 
       <span class="expand"> 
        expand</span> 
      </td> 
      <td> 
       Show 
      </td> 
      <td> 
       Show 
      </td> 
     </tr> 
     <tr class="hidden"> 
      <td colspan="3"> 
       hidden 1 
      </td> 
     </tr> 
     <tr class="hidden"> 
      <td colspan="3"> 
       hidden 2 
      </td> 
     </tr> 
</table> 

现在jQuery的

$("td span.expand").click(function() { 
    $(this).parents("tr.main").nextUntil("tr.main").toggle(); 
}); 

本例使用nextUntil将继续选择元素，直到达到规定的选择，在这种情况下tr.main

Answer 2

这里有一些简单的教程http://designgala.com/how-to-expand-collapse-toggle-div-layer-using-jquery/，只是转换处理表中的行，但你应该考虑使用的div