<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/js/jqr.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>jquery</title>

<style type="text/css">

table        { border:0;border-collapse:collapse;}

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

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>

</head>

<body>

    <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>

</body>

</html>
$(function(){

    $("tr.parent").click(function(){

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

    })

    $("tr:contains('王五')").addClass("selected");

    $("table tr").hide().filter("tr:contains('李')").show();

});

jquery表格仿菜单的更多相关文章

  1. jQuery精仿手机上的翻牌效果菜单

    代码简介: jQuery精仿手机上的翻牌效果菜单,很平滑的动画翻牌效果,每点击一下菜单,就会翻去一下,貌似很灵敏的动作.注意:如果预览时没看到效果,请刷新一下页面,让jquery载入就行了,在实际使用 ...

  2. 炫酷实用的jQuery插件 涵盖菜单、按钮、图片

    新的一周开始了,今天我们要为大家分享一些全新的jQuery插件和HTML5/CSS3应用,这些jQuery插件不仅非常炫酷,而且还挺实用,这次的分享包含jQuery菜单.CSS3按钮已经多种图片特效, ...

  3. 近20个绚丽实用的jQuery/CSS3侧边栏菜单（转载）

    http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...

  4. 雷林鹏分享：jQuery EasyUI 树形菜单 - 创建复杂树形网格

    jQuery EasyUI 树形菜单 - 创建复杂树形网格 树形网格(TreeGrid)可以展示有限空间上带有多列和复杂数据电子表格.本教程将演示如何将表格数据排列在分割的网格和多行表头中,以便组织共 ...

  5. Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引

    因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...

  6. 可控制导航下拉方向的jQuery下拉菜单代码

    效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...

  7. Web jquery表格组件 JQGrid 的使用 - 11.问题研究

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  8. Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  9. Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

随机推荐

  1. tableView中自定header视图的重用问题

    在UItableView中使用代理方发 - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger ...

  2. MVC分页控件之二，为IQueryable定义一个扩展方法，直接反回PagedList<T>结果集（转）

    namespace Entity { public interface IPagedList { /// <summary> /// 记录数 /// </summary> in ...

  3. 【C++】error C4146: 一元负运算符应用于无符号类型，结果仍为无符号类型

    刷leetcode 263.uglynumber时,代码如下: class Solution { public: bool isUgly(int num) { int temp = num; ) re ...

  4. LightOj1285 - Drawing Simple Polygon（连接多边形各点）

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1285 题意:给你一些点,然后把它们用一条线把它们连起来,构成一个多边形,不能有相交,必 ...

  5. android 打开软件出现红框

    android打开软件的时候会出现红框,剑锋之前解了这个问题.fork过来,方便以后查看. 参考链接: http://www.cnblogs.com/zengjfgit/p/5377744.html ...

  6. Chrome控制台调试工具用法

    下面我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用. Console API 当打开 firebug (也包括 Chrome 等浏览器的自带调试工具),window 下面会注册 ...

  7. JavaScript权威指南（第六版）--JavaScript概述 DEMO

    //所有在双斜线之后的内容都属于注释 //仔细阅读这里的注释:它们对JavaScript代码做了解释 //变量是表示值的一个符号名字 //变量是通过var关键字声明的 var x; //声明一个变量x ...

  8. TXT导入出现乱码

    错误#1 11:15 2012-12-19客户提供一txt文本文件,要求导入到数据库,选用dts导入工具,选择数据源步骤如下列预览时出现乱码解答#1 双击打开原始文件中文显示正常,将其另存为选择编码为 ...

  9. java类的加载、链接、初始化

    JVM和类的关系 当我们调用JAVA命令运行某个java程序时,该命令将会启动一条java虚拟机进程,不管该java程序有多么复杂,该程序启动了多少个线程,它们都处于该java虚拟机进程里.正如前面介 ...

  10. [地图代数]处理DEM中的高程异常值——ArcGIS栅格计算的应用

    接了一个任务,要处理DEM原始数据中的高程异常值,如图中的异常亮点. 想了一下,以前处理过建筑物附近的DEM铲平,那么高程异常值应该如何处理呢? 显然直接铲平时不太合理的,需要利用异常值周围的高程进行 ...