<%@ 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><Scripttype= "Text/javascript"src= "<%=request.getcontextpath ()%>/js/jquery-1.8.3.min.js"></Script><Scripttype= "Text/javascript"src= "<%=request.getcontextpath ()%>/js/jqr.js"></Script><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"><title>Jquery</title><styletype= "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;} /*even line style*/. Odd{background:#FFFFEE;} /*Odd Line Style*/. Selected{background:#FF6500;Color:#fff;}</style></Head><Body> <Table> <thead> <TR><th>Name</th><th>Gender</th><th>Temporary land</th></TR> </thead> <tbody> <TRclass= "Parent"ID= "Row_01"><TDcolspan= "3">Front desk Design Group</TD></TR> <TRclass= "Child_row_01"><TD>Zhang Shan</TD><TD>Man</TD><TD>Ningbo, Zhejiang</TD></TR> <TRclass= "Child_row_01"><TD>John doe</TD><TD>Woman</TD><TD>Hangzhou, Zhejiang</TD></TR> <TRclass= "Parent"ID= "Row_02"><TDcolspan= "3">Front Office Development Team</TD></TR> <TRclass= "Child_row_02"><TD>Harry</TD><TD>Man</TD><TD>Changsha, Hunan</TD></TR> <TRclass= "Child_row_02"><TD>Find Six</TD><TD>Man</TD><TD>Wenzhou, Zhejiang</TD></TR> <TRclass= "Parent"ID= "Row_03"><TDcolspan= "3">Background Development Group</TD></TR> <TRclass= "Child_row_03"><TD>Rain</TD><TD>Man</TD><TD>Hangzhou, Zhejiang</TD></TR> <TRclass= "Child_row_03"><TD>Maxman</TD><TD>Woman</TD><TD>Hangzhou, Zhejiang</TD></TR> </tbody> </Table></Body></HTML>
$ (function() { $("Tr.parent"). Click (function() { $ (this). Toggleclass ("selected"). Siblings ('. Child_ ' +this. id). Toggle (); }) $ ("Tr:contains (' Harry ')"). AddClass ("selected"); $ ("table tr"). Hide (). Filter ("Tr:contains (' Li ')"). Show ();});
jquery Table Imitation Menu