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>
效果图:
时间： 2024-08-05 07:53:32