javascript - 按表格标题展开/折叠 HTML 表格

Question

我有一系列要根据一些 PHP 代码和 MySQL 查询显示的表格。但是，想知道是否有一种方法可以通过单击表头来采用下表(使用 JavaScript 或其他东西)来展开和折叠表数据。

我的表格编码为...

<table>
    <tr>
        <th>Always Visible</th>
    </tr>
    <tr>
        <td>Hidden 01</td>
        <td>Hidden 02</td>
        <td>Hidden 03</td>
    </tr>
    <tr>
        <td>Hidden 01</td>
        <td>Hidden 02</td>
        <td>Hidden 03</td>
    </tr>
</table>

看起来...(涉及到我的 CSS)...

这有可能吗？

-尼克

Answer 1

是这样的吗？

演示@ Fiddle

如果您想默认折叠表格，请在 CSS 中执行，如下所示。

tbody { display: none; }

<table>
    <thead>
    <tr>
        <th>Always Visible</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Hidden 01</td>
        <td>Hidden 02</td>
        <td>Hidden 03</td>
    </tr>
    <tr>
        <td>Hidden 01</td>
        <td>Hidden 02</td>
        <td>Hidden 03</td>
    </tr>
    </tbody>
</table>

$("thead").find("th").on("click", function() {
    $(this).closest("table").find("tbody").toggle(); //you can set delay within toggle as well, like .toggle(500);
});