Question

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

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

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

Answer 1

给出与上述类似的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 Fiddle demo

以上内容依赖于tbody个元素，其中id用于将内容组合在一起，而标题行中的链接则链接到id。

不幸的是，我无法想到任何其他非JavaScript替代方案来实现您似乎想要的东西;所以虽然这确实存在兼容性问题，但在我们指定的html标签的限制下，它确实是我能想到的最好的。

级联行在表中的标题行下面

1 个答案: