javascript - 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>

但是表格是“老派”的，所以如果您画出您想要显示的图片，我们或许也可以为您提供一些替代方法。