jQuery表格，可点击下拉菜单 - 多个隐藏行？

Question

美好的一天程序员，

作为一名业余爱好者，我四处寻找并找到了创建一个非常好的jQuery下拉表的人。我发现了一个了不起的一个...

$("#report tr:odd").addClass("odd"); 
$("#report tr:not(.odd)").hide(); 
$("#report tr:first-child").show(); 
$("#report tr.odd").click(function(){ 
    $(this).next("tr").toggle(); 
    $(this).find(".arrow").toggleClass("up"); 
}); 

而CSS ...

#report { border-collapse:collapse;} 
#report h4 { margin:0px; padding:0px;} 
#report img { float:left;} 
#report ul { margin:10px 0 10px 40px; padding:0px;} 
#report th { background:#222222 url(header_bkg.png) repeat-x scroll center left; color:#FFF; padding:3px 8px; text-align:center;} 
#report td { background:#111111 none repeat-x scroll top left; color:#000; padding:3px 8px; text-align:center;} 
#report tr.odd td { background:#000000 url(row_bkg.png) repeat-x scroll center left; cursor:pointer;} 
#report div.arrow { background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;} 
#report div.up { background-position:0px 0px;} 

就其本身而言，它工作得很好......你可以看到我用它在游戏页面以下链接： http://www.mynextbit.com/Pages/Wreckedified/roster.html

我试图找出一种方法，让它到我可以下降可能12左右的行而不是一个显示一堆关于表中的这些字符之一的数据。我做了一些挖掘，并认为我可以重写jQuery使用

nth-child(12n+0) 

但不能完全拉它。我至少在正确的轨道上，还是有一个更明显和简单的解决方案？

Answer 1

您是否认为可以在行内简单地启动新表，以便保留现有功能？

现在你的HTML看起来有点像这样：

<table> 
<thead> 
    <th>Character</th><th>iLevel</th><th>And your other columns...</th> 
</thead> 
<tbody> 
    <tr> 
     <td>CharacterName (Build)</td><td>559</td><td>other column data...</td> 
    </tr> 
    <tr> 
     <td>This is your hidden data row</td> 
    </tr> 
</tbody> 
</table> 

而不是试图修改脚本，它隐藏/显示，未来12个<tr>标签，你可以只创建隐藏的数据中的新表所以，如果你画的要显示我们也许能够给你一些替代的方法是什么太大的图片排...

<table> 
<thead> 
    <th>Character</th><th>iLevel</th><th>And your other columns...</th> 
</thead> 
<tbody> 
    <tr> 
     <td>CharacterName (Build)</td><td>559</td><td>other column data...</td> 
    </tr> 
    <tr> 
     <td> 
      <table> 
       <tr><td>Hidden data row 1</td></tr> 
       <tr><td>Hidden data row 2</td></tr> 
       <tr><td>Hidden data row 3</td></tr> 
       <tr><td>Hidden data row 4</td></tr> 
       <tr><td>Hidden data row 5</td></tr> 
       <tr><td>Hidden data row 6</td></tr> 
       <tr><td>Hidden data row 7</td></tr> 
       <tr><td>Hidden data row 8</td></tr> 
       <tr><td>Hidden data row 9</td></tr> 
       <tr><td>Hidden data row 10</td></tr> 
       <tr><td>Hidden data row 11</td></tr> 
       <tr><td>Hidden data row 12</td></tr> 
      </table> 
     </td> 
    </tr> 
</tbody> 
</table> 

但表是“老校友”。