<%@ 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. Win7+VS2005编译Qt4.7.3+phonon（需要安装新版本Windows SDK）

    Qt官网上下载的源代码在编译时并没有将phonon继承进去,只提供了源代码,而在Win7+VS2005中编译phonon时遇到不少的问题,因为phonon只是一个前端程序,要使用其实现多媒体的播放还需 ...

  2. Wordpress更改后台地址

    wordpress默认的后台地址是 xx/wp-admin  或xx/wp-login.php ,谁都知道感觉很不安全, 方法一:使用插件 通过插件在地址上加上只有你知道的参数才能访问 1.后台搜索插 ...

  3. oracle 表查询一

    通过scott用户下的表来演示如何使用select语句,接下来对emp.dept.salgrade表结构进行解说. emp 雇员表字段名称   数据类型       是否为空   备注-------- ...

  4. BetterZip，支持rar等多种压缩解压方式（Xcode自身不能解压rar）

    百度云盘下载链接: http://pan.baidu.com/s/1sk7Faw9密码: muw7 rarosx-5.3.0.tar.gz1.解压之后放到/usr/local/目录下(位置可选,不过要 ...

  5. ubuntu mysql 远程连接

    最近需要远程连接mysql服务器,先进行简单的测试,过程记录于此. 参考链接: http://blog.chinaunix.net/uid-28458801-id-3445261.html http: ...

  6. Unofficial Windows Binaries for Python Extension Packages

    http://www.lfd.uci.edu/~gohlke/pythonlibs/#numpy

  7. TXT导入出现乱码

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

  8. iOS 重写UITableViewCell之动态获取label文字的宽度进行布局

    #import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDelegate> @pr ...

  9. play 之定时器job

    play定时任务之job 要创建一个Job,只需要简单地继承play.jobs.Job类就可以. 一些常用的注解: @Every("1h")         每隔1小时执行一次 @ ...

  10. ORA-19693: 已包括备份片段

    使用rman异机恢复数据时,报"ORA-19693: 已包括备份片段..."错误. 执行的rman命令: RMAN> run{ 2> allocate channel ...