JQuery-table展开与缩小的实现

最新推荐文章于 2023-06-28 13:45:34 发布

laizhixue

最新推荐文章于 2023-06-28 13:45:34 发布

阅读量1.6k

点赞数 1

分类专栏： JQuery

本文链接：https://blog.csdn.net/laizhixue/article/details/79163067

版权

JQuery 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>

    <style>
        .selected {
            background:yellow;
        }
    </style>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
    <script>
        $(function ()
        {
            $("tr.parent").click(function (){

                $(this).toggleClass("selected").siblings('.child_' + this.id).fadeToggle();
            });
        });

    </script>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                 <th>姓名</th><th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr class="parent" id="row_01">
                <th colspan="2">前台设计组</th>
            </tr>
            <tr class="child_row_01">
                <th>2</th>
                <th>2</th>
            </tr>
            <tr class="child_row_01">
                <th class="">1</th>
                <th class="">1</th>
            </tr>
            <tr class="parent" id="row_02">
                <th colspan="2">前台开发组</th>
            </tr>
            <tr class="child_row_02">
                <th>2</th>
                <th>2</th>
            </tr>
            <tr class="child_row_02">
                <th class="">1</th>
                <th class="">1</th>
            </tr>
        </tbody>
    </table>
</body>
</html>

laizhixue

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery-table展开与缩小的实现

@{ Layout = null;} .selected { background:yellow; } $(function () { $("tr.parent").click(function
复制链接

扫一扫