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> 

但表是「老校友」。