zoukankan      html  css  js  c++  java
  • jQuery实现的表格展开伸缩效果实例

    <table>
    <thead>
    <tr>
    <th>姓名</th>
    <th>性别</th>
    <th>暂住地</th>
    </tr>
    </thead>
    <tbody>
    <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>
    <tr class="parent" id="row_03">
    <td colspan="3">后台开发组</td>
    </tr>
    <tr class="child_row_03">
    <td>Rain</td>
    <td>男</td>
    <td>浙江杭州</td>
    </tr>
    <tr class="child_row_03">
    <td>MAXMAN</td>
    <td>女</td>
    <td>浙江杭州</td>
    </tr>
    </tbody>
    </table>

    <script>
    $(function () {
    $('tr.parent').click(function () {
    //$(this).toggleClass("selected")//添加/删除高亮
    //.siblings('.child_' + this.id).toggle();
    $(this).siblings('.child_' + this.id).toggle();
    })
    })
    </script>

    <style>
    table {
    border: 0;
    border-collapse: collapse;
    }

    td {
    font: normal 12px/17px Arial;
    padding: 2px;
    100px;
    }

    th {
    font: bold 12px/17px Arial;
    text-align: left;
    padding: 4px;
    border-bottom: 1px solid #333;
    100px;
    }

    .parent {
    background: #FFF38F;
    cursor: pointer;
    }
    /* 偶数行样式*/
    .odd {
    background: #FFFFEE;
    }
    /* 奇数行样式*/
    .selected {
    background: #FF6500;
    color: #fff;
    }
    </style>

  • 相关阅读:
    高级数据类型--字典(dict)
    一些JS常用的方法
    怎样提高WebService的性能
    Microsoft Enterprise Library 5.0 系列(三)
    Microsoft Enterprise Library 5.0 系列(四)
    Expression Blend学习二UI布局
    Expression Blend学习四控件
    Expression Blend学习5控件
    Expression Blend学习动画基础
    WPF三维图形
  • 原文地址:https://www.cnblogs.com/yangpeng-jingjing/p/6003403.html
Copyright © 2011-2022 走看看