<%@ 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. .Net程序员安卓学习之路2：访问网络API

    做应用型的APP肯定是要和网络交互的,那么本节就来实战一把Android访问网络API,还是使用上节的DEMO: 一.准备API: 一般都采用Json作为数据交换格式,目前各种语言均能输出Json串. ...

  2. QFile文件操作-QT

    #include <QCoreApplication> #include<QFile> #include<QString> #include<QDebug&g ...

  3. 验证整数、小数、实数、有效位小数最简单JavaScript正则表达式

    输入完按回车后即可验证!(自认为最简单!) 正整数:  负整数:  整 数:  正小数:  负小数:  小 数:  实 数:  保留1位小数: 保留2位小数: 保留3位小数: 说明:IE6.0.IE7 ...

  4. iOS 调出storyboard里面起始Controller的箭头

    在storyboard里面,如果第一个ViewController不是默认的ViewController的时候,我们就需要拖拽一个出来. 如果把默认的ViewController删掉的话,前面的箭头, ...

  5. ByteBuffer

    1.堆内:HeapByteBuffer,在java的堆内创建. 缺点:可能引起堆的不断gc 写文件的时候需要先将堆的buffer写进直接buffer里,然后再写入文件 2.堆外:DirectByteB ...

  6. 执行shell脚本的几种方法及区别

    执行shell脚本的几种方法及区别 http://blog.csdn.net/lanxinju/article/details/6032368 (认真看) 注意:如果涉及到脚本之间的调用一定要用 . ...

  7. 股票中带有ST和*ST的股票是什么意思啊？一图了解新三板与主板、中小板、创业板制度差异！

    st表示已经亏损超过1年以上的 *st表示连续亏损3年以上,并且有退市风险的,随时可能会“退市”到时候你的钱可能都拿不会来 主板股票代码上海60开头,深圳000开头,通常指大中型企业:中小板002开头 ...

  8. JAVA中通过代码操作PC内容进行功能的实现

    1.添加计划任务,用户项目中需要添加定时提醒功能: 计划任务只需要写一个继承java.util.TimerTask的类,覆盖其中的run方法即可,例如:   import java.util.*; p ...

  9. 8月17日 Power-BI关于全国房地产开发投资情况分析 QQ群视频交流开课啦

    <ignore_js_op> 数读|中国的经济只剩下房地产了么? 引言: 近日一则标题为“房奴们又立功啦,7月份新增贷款几乎都来自房贷!”的报道吸引了大众的目光.该报道指出在央行8月13日 ...

  10. android关于The connection to adb is down, and a severe error has occured.这个问题的解决办法

    有时在打开模拟器的时候会出现The connection to adb is down, and a severe error has occured.这个问题,这个问题的解决办法有两个: 方法一:找 ...