【table中部分tr的折叠与展开】

搬砖老金牛

于 2023-06-28 13:45:34 发布

阅读量605

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_48968230/article/details/131435091

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

示例功能：

1. 点击“作品”按钮，会显示author的作品信息

2. 再次点击“作品”按钮，会收起author的作品信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table中的分类展开与收起</title>
    <style>
        table thead{
            background-color: #d0e4fe;
        }
 
        table tbody{
            background-color: lightgreen;
        }

    </style>
</head>
<body>
    <table align="center">
        <thead align="center">
            <tr>
                <th style="width: 50px;">ID</th>
                <th style="width: 180px;">Author</th>
                <th style="width: 120px;">Operation</th>
            </tr>
        </thead>
        <tbody align="center">
            <!-- 父级元素fid=0 -->
            <tr sequence="1" fid="0">
                <td>1</td>
                <td>余华</td>
                <td><button class="bookShow" status="true">作品</button></td>
            </tr>
            <!-- 子级元素fid==所属父级元素的sequence值 -->
            <tr sequence="2" fid="1">
                <td>1-1</td>
                <td>《活着》</td>
                <td></td>
            </tr>
            <tr sequence="3" fid="1">
                <td>1-2</td>
                <td>《许三观卖血记》</td>
                <td></td>
            </tr>
            <!-- 父级元素 0 -->
            <tr sequence="4" fid="0">
                <td>2</td>
                <td>曹文轩</td>
                <td><button class="bookShow" status="true">作品</button></td>
            </tr>
            <tr sequence="5" fid="4">
                <td>2-1</td>
                <td>《草房子》</td>
                <td></td>
            </tr>
            <tr sequence="6" fid="4">
                <td>2-2</td>
                <td>《青铜葵花》</td>
                <td></td>
            </tr>
        </tbody>
    </table>

    <!-- 引入jquery.js -->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        var sequence_fid;
        //1. 非父级元素 初始时隐藏
        $("tbody tr[fid!='0']").hide();
        //2. 点击“作品”按钮的触发事件
        $(".bookShow").click(function(){
            //status为true,则展开
            if($(this).attr('status') == 'true')
            {
                $(this).attr('status', 'false');  //表示已经展开
                sequence_fid = $(this).parent().parent().attr('sequence');
                $(`tbody tr[fid="${sequence_fid}"]`).show();
            }
            else  //status为false,则收起
            {
                $(this).attr('status', 'true');   //表示已收起
                sequence_fid = $(this).parent().parent().attr('sequence');
                $(`tbody tr[fid="${sequence_fid}"]`).hide();
            }
        })
    </script>
</body>
</html>

运行结果：