关于javascript：使用jQuery滑动切换一组表格行

Using jQuery to slideToggle a group of Table Rows

我对javaScript和jQuery还是很陌生，所以希望这将是一个快速修复。我需要显示一个包含可以分为几类的数据的表，并且我想实现一个slideToggle来隐藏/显示每个给定类别中的所有观测值。

下面的代码应该(理想情况下)显示一个包含4列9行的表，每3行的组中都有一个绿色的" Section i"行。我希望每个Section标头都可以用作slideToggle来扩展或折叠其下面的所有行。现在，什么都没有崩溃。有什么想法吗？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

<head>
<style type="text/css">
td{padding:5px;}
</style>

<script type="text/javascript" src="js/jquery.js">
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(this).next(".section").slideToggle();
});
});

</head>

<body>
<p>
<table id="main_table">
<thead>
<tr class="firstline">
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
</thead>
<tbody>
<tr style="background-color:green; color:white">
<td colspan="4" class="flip"> Section 1 </td>
</tr>

<tr>
<td>item 111</td>
<td>item 112</td>
<td>item 113</td>
<td>item 114</td>
</tr>
<tr>
<td>item 121</td>
<td>item 122</td>
<td>item 123</td>
<td>item 124</td>
</tr>
<tr>
<td>item 131</td>
<td>item 132</td>
<td>item 133</td>
<td>item 134</td>
</tr>

<tr style="background-color:green; color:white">
<td colspan="4" class="flip"> Section 2 </td>
</tr>

<tr>
<td>item 211</td>
<td>item 212</td>
<td>item 213</td>
<td>item 214</td>
</tr>
<tr>
<td>item 221</td>
<td>item 222</td>
<td>item 223</td>
<td>item 224</td>
</tr>
<tr>
<td>item 231</td>
<td>item 232</td>
<td>item 233</td>
<td>item 234</td>
</tr>

<tr style="background-color:green; color:white">
<td colspan="4" class="flip"> Section 3 </td>
</tr>

<tr>
<td>item 311</td>
<td>item 312</td>
<td>item 313</td>
<td>item 314</td>
</tr>
<tr>
<td>item 321</td>
<td>item 322</td>
<td>item 323</td>
<td>item 324</td>
</tr>
<tr>
<td>item 331</td>
<td>item 332</td>
<td>item 333</td>
<td>item 334</td>
</tr>

</tbody>
</table>
</p>
</body>