JQ---表格展开与关闭

最新推荐文章于 2022-05-06 20:04:31 发布

candy_li123

最新推荐文章于 2022-05-06 20:04:31 发布

阅读量1.1k

点赞数

分类专栏： JQuery 文章标签：表格展开与关闭

本文链接：https://blog.csdn.net/candy_li123/article/details/50112791

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

2015-11-30：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>表格的展开与关闭</title>
    <style type="text/css">
        tr{
            text-align: center;
        }
        th{
            width: 120px;
        }   
        .selected{
            background-color: #7FFFD4;
        }   
    </style>
    <script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
$(function(){
    $("tr.parent").click(function(){
        $(this)
        .toggleClass("selected")
        .siblings('.child_'+this.id).toggle();
    }).click();
});
    </script>
</head>
<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>暂住地</th>
        </tr>
        <tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>
        <tr class="child_row_01">
            <td>张山</td>
            <td>男</td>
            <td>浙江宁波</td>
        </tr>
        <tr class="child_row_01">
            <td>李四</td>
            <td>男</td>
            <td>浙江宁波</td>
        </tr>
        <tr class="parent" id="row_02"><td colspan="3">前台设计组</td></tr>
        <tr class="child_row_02">
            <td>王五</td>
            <td>男</td>
            <td>浙江杭州</td>
        </tr>
        <tr class="child_row_02">
            <td>赵六</td>
            <td>男</td>
            <td>浙江杭州</td>
        </tr>       
    </table>
</body>
</html>

candy_li123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQ---表格展开与关闭

2015-11-30：<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title>表格的展开与关闭</title> <style type="text/css"> tr{ text-align: center; } th{
复制链接

扫一扫