实现表格的折叠

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="../plugins/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link href="../plugins/layui/2.5.6/css/layui.css" rel="stylesheet">
    <script src="../plugins/jquery/jquery-3.6.0.min.js"></script>


    <script src="../plugins/layui/2.5.6/layui.all.js"></script>
    <script src="../plugins/ui-frame/layer/2.2/layer.js"></script>
    <script src="../plugins/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="../plugins/bootstrap-table/js/bootstrap-table.min.js"></script>
    <script src="../plugins/bootstrap-table/js/bootstrap-table-zh-CN.min.js"></script>
</head>

<body>
    <script>
        $(function () {
            $(".detail").click(function () {
                var that = this;
                $(that).parent().next().toggle();
            })
        })
    </script>

    <div class="htmleaf-container">
        <table border="1px" id="dataTable">
            <thead>
                <tr>
                    <th>折叠/展开</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>学校</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th class="detail">折叠</th>
                    <th>啊啊啊</th>
                    <th>啊啊啊</th>
                    <th>啊啊啊</th>
                </tr>
                <tr class="view">
                    <td colspan="4">
                        <p>id:1111</p>
                        <p>name:1111</p>
                        <p>sex:1111</p>
                        <p>loc:1111</p>
                    </td>
                </tr>
                <tr>
                    <th class="detail">折叠</th>
                    <th>啊啊啊</th>
                    <th>啊啊啊</th>
                    <th>啊啊啊</th>
                </tr>
                <tr class="view">
                    <td colspan="4">
                        <p>啊啊啊</p>
                        <p>啊啊啊</p>
                        <p>啊啊啊</p>
                        <p>啊啊啊</p>
                        <p>啊啊啊</p>
                    </td>
                </tr>
                <tr>
                    <th class="detail">折叠</th>
                    <th>啊啊啊</th>
                    <th>啊啊啊</th>
                    <th>啊啊啊</th>
                </tr>
                <tr class="view">
                    <td colspan="4">
                        <p>ssssss</p>
                        <p>啊啊啊</p>
                        <p>啊啊啊</p>
                        <p>啊啊啊</p>
                        <p>啊啊啊</p>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

主要通过jquery设置显示和隐藏

相关阅读:
代码随想录1刷—字符串篇
IC工程师职场必备《经典Verilog100多个代码案例》（附下载）
全志V853平台Camera模块开发框架详解
数学建模——最大流问题（配合例子说明）
ios xcode15 navigationController?.navigationBar.isHidden = false无效
linux开发技术栈
设计模式---原型模式
【React】《React 学习手册 (第2版) 》笔记-Chapter5-在 React 中使用 JSX
Nacos2.1.0与Seata1.5.2版本基于Docker部署指南
有哪些专业的配音APP推荐？

原文地址：https://blog.csdn.net/qq_41848006/article/details/126778924