Javascript jQuery表格,可点击下拉列表-多个隐藏行?

Javascript jQuery表格,可点击下拉列表-多个隐藏行?,javascript,jquery,html,css,Javascript,Jquery,Html,Css,大家好 作为一名业余爱好者,我四处寻找,发现有人创建了一个非常好的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(".

大家好

作为一名业余爱好者,我四处寻找,发现有人创建了一个非常好的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;}
就其本身而言,它工作得很好。。。您可以通过以下链接看到我使用它的游戏页面:

我正试图找到一种方法,在那里我可以放下大约12行,而不是仅仅一行,来显示关于表中一个字符的一组数据。我做了一些挖掘,并认为可以使用

nth-child(12n+0)

但没能成功。至少我的思路是正确的,还是有一个更明显、更简单的解决方案?

您是否考虑过可以在行中简单地启动一个新表,以便保留现有功能

现在,您的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>

和你的其他专栏。。。
CharacterName(内部版本)559其他列数据。。。
这是您的隐藏数据行
您可以在隐藏的数据行中创建一个新表,而不是试图更改脚本,使其隐藏/显示接下来的12个
标记

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

和你的其他专栏。。。
CharacterName(内部版本)559其他列数据。。。
隐藏数据行1
隐藏数据行2
隐藏数据第3行
隐藏数据第4行
隐藏数据行5
隐藏数据第6行
隐藏数据第7行
隐藏数据第8行
隐藏数据第9行
隐藏数据第10行
隐藏数据行11
隐藏数据行12

但这张桌子是“老派”的,所以如果你画了一张你想展示的图片,我们可能也能给你一些替代方法。

在工作中,再过几个小时就不能尝试了。。。然而,我不在乎表格是否老套,只要它们显示我需要的信息。我会尝试一下,它看起来绝对可以工作,谢谢你的想法:)我回家后会标记为正确并实现它。我无法让它工作,因为.next(“tr”)没有区分主表和嵌套表。。。我又和第N个孩子乱搞了一些,但一直没能让它发挥作用,于是就放弃了。我现在要读一本书,学更多的东西。谢谢伊凡,我会看看我回家后是否能把它插上。但我只是在工作中摆弄一下小提琴,我想我能够按照我想要的方式操纵它(比如利用一排下面的所有不动产,而不仅仅是第一列)。。。它可以在小提琴上使用,我会看看是否可以在家里使用。我觉得我没有看到任何新的东西,但我们会看到的。谢谢伊凡坚持帮助我。好的,成功了。我大部分时间都在操作表,而我的问题都在javascript中。我没有使用“#report>tbody>tr”(而只是#report),它让世界变得完全不同。谢谢你的拨弄,这有助于把事情弄清楚。我现在就投正确票:)