0

我为一个在标题下有行的网站创建了一个表格。将有多个标题，我希望表格仅在首次显示时显示标题，并且仅在单击标题旁边的按钮时才显示下面的行。有没有办法做到这一点？我一直在查找级联表，但那些只显示下拉菜单，这不是我想要的。任何帮助（链接、解释、代码）将不胜感激！下面是我的表格中的一个标题和以下一些行的示例。

为了进一步澄清这个例子，我想做的是只显示显示“当前位置”的行，并且在当前之前不可见以下行（农村、郊区、大都市 - 位置类型）单击位置或单击那里的按钮。

<table border="1" cellpadding="5%">
        <tr><th align=left>Current Location</th></tr>
        <tr>
            <td>Rural</td>
            <td>Total Value</td>
            <td>Average Value</td>
            <td>Percentage of total</td>
            </tr>
        <tr>
            <td>Suburban</td>
            <<td>Total Value</td>
            <td>Average Value</td>
            <td>Percentage of total</td>
        </tr>
        <tr>
            <td>Metropolitan</td>
            <td>Total Value</td>
            <td>Average Value</td>
            <td>Percentage of total</td>
        </tr>

4

1 回答 1

0

给定与上述类似的 HTML（请注意，我添加了colspan属性，并删除了内联和不推荐使用的属性）：

<table>
    <tbody class="header">
        <tr>
            <td colspan="4"><a href="#demo">Current Location</a>

            </td>
        </tr>
    </tbody>
    <tbody id="demo">
        <tr>
            <td>Rural</td>
            <td>Total Value</td>
            <td>Average Value</td>
            <td>Percentage of total</td>
        </tr>
        <tr>
            <td>Suburban</td>
            <td>Total Value</td>
            <td>Average Value</td>
            <td>Percentage of total</td>
        </tr>
        <tr>
            <td>Metropolitan</td>
            <td>Total Value</td>
            <td>Average Value</td>
            <td>Percentage of total</td>
        </tr>
    </tbody>
    <tbody class="header">
        <tr>
            <td colspan="4"><a href="#demo2">Another Location</a>

            </td>
        </tr>
    </tbody>
    <tbody id="demo2">
        <tr>
            <td>Rural</td>
            <td>Total Value</td>
            <td>Average Value</td>
            <td>Percentage of total</td>
        </tr>
        <tr>
            <td>Suburban</td>
            <td>Total Value</td>
            <td>Average Value</td>
            <td>Percentage of total</td>
        </tr>
        <tr>
            <td>Metropolitan</td>
            <td>Total Value</td>
            <td>Average Value</td>
            <td>Percentage of total</td>
        </tr>
    </tbody>
</table>

以下 CSS 有效（仅在 Chromium 27 中测试）：

table, td {
    border: 1px solid #000;
}
td {
    padding: 5px;
}
/* hides *all* 'tbody' elements:
*/
tbody {
    display: none;
}
/* shows the 'tbody.header' elements:
*/
tbody.header {
    display: table-row-group;
}
/* shows the relevant elements (in those browsers that support ':target'):
*/
tbody:target {
    display: table-row-group;
}

JS 小提琴演示。

以上依赖于tbody元素，带有id, 用于将内容组合在一起，并且标题行中的链接链接到该id。

不幸的是，我想不出任何其他非 JavaScript 替代方案来实现您想要的；因此，虽然这确实存在兼容性问题，但在您指定的

于 2013-07-10T22:51:26.357 回答