按表标题展开/折叠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）......

这一切都可能吗？

-Nick

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);
});

Answer 2

我创建了一个示例代码

$(function () {

var tableBody = $("#tableBody"),
    tableHead = $("#tableHead");
    
    tableHead.on("click", function () {
        tableBody.slideToggle("slow");
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
    <thead id="tableHead">
        <tr>
            <th>Always Visible</th>
        </tr>
    </thead>
    <tbody id = "tableBody">
        <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>

我希望这是你想要实现的目标。