• 表格展开


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    .table1 {
        border:0;
        border-collapse:collapse;
    }
    .table1 td {
        font:normal 12px/17px Arial;
        padding:2px;
        width:100px;
    }
    .table1 th {
        font:bold 12px/17px Arial;
        text-align:left;
        padding:4px;
        border-bottom:1px solid #333;
        width:100px;
    }
     .parent {
        background:#FFF38F;
        cursor:pointer;
    }  /* 偶数行样式*/
    .odd {
        background:#FFFFEE;
    }  /* 奇数行样式*/
    .selected {
        background:#FF6500;
        color:#fff;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
        $('.table1 tr.parent').click(function(){   // 获取所谓的父行
                $(this)
                    .toggleClass("selected")   // 添加/删除高亮
                    .siblings('.child_'+this.id).toggle();  // 隐藏/显示所谓的子行
        }).click();
    })
    </script>
    </head>
    <body>
    <table class="table1">
      <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>
    </body>
    </html>
  • 相关阅读:
    Metasploit advanced命令使用技巧
    Metasploit命令info使用技巧
    Kali Linux 2020.1b发布了
    设置USB无线网卡为监听模式大学霸IT达人
    解决ifconfig命令未找到
    Metasploit新增技巧提示功能
    Wireshark运算符!=无法正常工作
    解决Kali Linux XFCE桌面Tab无法补全
    Nessus更新到8.9.1
    ASP入门(七)-Response小案例
  • 原文地址:https://www.cnblogs.com/Xuman0927/p/5524189.html
Copyright © 2020-2023  润新知