1.  <html xmlns="http://www.w3.org/1999/xhtml">
  2.  <head runat="server">
  3.      <title></title>
  4.      <style type="text/css">
  5.          table
  6.          {
  7.              width: 300px;
  8.          }
  9.  
  10.          table, thead
  11.          {
  12.              border: 1px solid black;
  13.              border-collapse: collapse;
  14.          }
  15.  
  16.          .parent
  17.          {
  18.              background: lightgreen;
  19.          }
  20.  
  21.          .selected
  22.          {
  23.              background: #fff38f;
  24.          }
  25.      </style>
  26.      <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
  27.      <script type="text/javascript">
  28.          $(function () {
  29.  
  30.              $("tr.parent").click(function () {
  31.                  $(this).toggleClass("selected").siblings(".child_" + this.id).toggle();
  32.              });
  33.  
  34.              //$("tr:contains('康')").addClass("selected");//这个也可以放开看看哦
  35.  
  36.              //$("table tbody tr").hide().filter(":contains('康')").show().addClass("selected");//这个也可以放开看看哦
  37.  
  38.          });
  39.      </script>
  40.  
  41.  </head>
  42.  <body>
  43.      <form id="form1" runat="server">
  44.      <div>
  45.          <table>
  46.              <thead>
  47.                  <tr>
  48.                      <th>
  49.                          姓名
  50.                      </th>
  51.                      <th>
  52.                          性别
  53.                      </th>
  54.                      <th>
  55.                          暂住地
  56.                      </th>
  57.                  </tr>
  58.              </thead>
  59.              <tbody>
  60.                  <tr class="parent" id="row_01">
  61.                      <td colspan="3">
  62.                          前台设计组
  63.                      </td>
  64.                  </tr>
  65.                  <tr class="child_row_01">
  66.                      <td>
  67.                          王丹丹
  68.                      </td>
  69.                      <td>
  70.                          女
  71.                      </td>
  72.                      <td>
  73.                          杭州
  74.                      </td>
  75.                  </tr>
  76.                  <tr class="child_row_01">
  77.                      <td>
  78.                          刘莹莹
  79.                      </td>
  80.                      <td>
  81.                          女
  82.                      </td>
  83.                      <td>
  84.                          南京
  85.                      </td>
  86.                  </tr>
  87.                  <tr class="parent" id="row_02">
  88.                      <td colspan="3">
  89.                          前台开发组
  90.                      </td>
  91.                  </tr>
  92.                  <tr class="child_row_02">
  93.                      <td>
  94.                          何晓晓
  95.                      </td>
  96.                      <td>
  97.                          女
  98.                      </td>
  99.                      <td>
  100.                          温哥华
  101.                      </td>
  102.                  </tr>
  103.                  <tr class="child_row_02">
  104.                      <td>
  105.                          毛龙龙
  106.                      </td>
  107.                      <td>
  108.                          男
  109.                      </td>
  110.                      <td>
  111.                          铁岭
  112.                      </td>
  113.                  </tr>
  114.                  <tr class="parent" id="row_03">
  115.                      <td colspan="3">
  116.                          后台开发组
  117.                      </td>
  118.                  </tr>
  119.                  <tr class="child_row_03">
  120.                      <td>
  121.                          张康
  122.                      </td>
  123.                      <td>
  124.                          男
  125.                      </td>
  126.                      <td>
  127.                          伦敦
  128.                      </td>
  129.                  </tr>
  130.                  <tr class="child_row_03">
  131.                      <td>
  132.                          戴维斯
  133.                      </td>
  134.                      <td>
  135.                          男
  136.                      </td>
  137.                      <td>
  138.                          墨尔本
  139.                      </td>
  140.                  </tr>
  141.              </tbody>
  142.          </table>
  143.      </div>
  144.      </form>
  145.  </body>
  146.  </html>

效果图:

jQuery学习笔记(7)--表格展开关闭的更多相关文章

  1. jQuery学习笔记(8)--表格筛选

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  2. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  3. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  4. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  5. jQuery学习笔记（一）：入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

  6. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  7. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

  8. jQuery 学习笔记：jQuery 代码结构

    jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...

  9. jQuery学习笔记之插件开发（4）

    jQuery学习笔记之插件开发(4) github源码地址 插件:了让原有功能的增强. 1.插件的种类(3种):局部.全局.选择器插件 1.1封装对象方法的插件 这种类型的插件是把一些常用或者重复使用 ...

随机推荐

  1. shell的各种运行模式？

    交互式shell和非交互式shell,login shell和non-login shell.首先,这是两个不同的维度来划分的,一个是是否交互式,另一个是是否登录.. 交互式模式就是shell等待你的 ...

  2. CF917C Pollywog —— 状压DP + 矩乘优化

    C. Pollywog 题目描述 原题题目链接.题目大意为:有$x$只蝌蚪,在$n$个石头中的最左端的$x$个石头上,这$n$个石头是在同一直线上的.每一次只能最左边的一个蝌蚪进行跳跃,并且只能跳$1 ...

  3. luogu P3092 [USACO13NOV]没有找零No Change

    题目描述 Farmer John is at the market to purchase supplies for his farm. He has in his pocket K coins (1 ...

  4. java之properties和yml两种配置文件比较(非原创）

    文章大纲 一.内容介绍二.参考文章 一.内容介绍   我们在使用SpringBoot这个框架的时候都一定使用或者说是见到过application.properties或者是application.ym ...

  5. Android JNI&NDK编程小结及建议

    前言 由于网上关于JNI/NDK相关的知识点介绍的比较零散而且不具备参照性,所以写了这篇JNI/NDK笔记,便于作为随时查阅的工具类型的文章,本文主要的介绍了在平时项目中常用的命令.JNI数据类型.签 ...

  6. hdu2102 BFS

    这是一道BFS的搜索题目,只是搜索范围变为了三维.定义数组visit[x][y][z]来标记空间位置,x表示楼层,y和z表示相应楼层的平面坐标. #define _CRT_SECURE_NO_DEPR ...

  7. 11.【nuxt起步】-登录验证

    1.新建/pages/login.vue 2.安装cookie Cnpm install js-cookie --s 3.Login.vue增加 import Cookie from 'js-cook ...

  8. AutoCAD如何又快又好标注直径

    如下图所示,想要标注一条直径.先选择快速标注   鼠标单击左右两侧线条(变成虚线),然后按回车,就可以往下拖了.拖完了就是一条直径的标注.   如果想要修改为自己的尺寸,则在文字替换中加上前缀%%c即 ...

  9. mysql使用mysqldump 与 mysqlimport进行数据库迁移

    1.导入数据库 1)source source /home/platvt/product/pc2_create_tables.sql 2)mysqlimport 使用mysqlimport导入数据: ...

  10. vue组件class绑定

    当在一个自定义组件上使用 class 属性时,这些类将被添加到该组件的根元素上面.这个元素上已经存在的类不会被覆盖. 例如,如果你声明了这个组件: Vue.component('my-componen ...