首先講最簡單的隔行變色操作。首先定義2個樣式：
.even{
background-color: #fff38f;
}
.odd{
background-color: #ffffee;
}
然后選中表格中需要變色的所有tr元素：
$("tbody tr:odd").addClass("odd");
$("tbody tr:even").addClass("even");
如果還要使表格是包含某一個字符的一行單獨顯示一種樣式可以使用contains選擇器
$("tbody tr:contains('張三')").addClass("selected");
第2常用操作就是單選表格高亮哥力。鼠標點擊某一行時候這一行高亮家夺，點擊另一行的時候就取消高亮革半，被點擊的一行再高亮
$("tbody tr").click(function(){
$(this).addClass("selected")
.siblings().removeClass("selected");
});
有單選表格高亮就還有高選表格高亮。點擊某一行就高亮，如果這一行已經(jīng)高亮就取消高亮真竖。
$("tbody tr").click(function(){
if($(this).hasClass("selected")){
$(this).removeClass("selected");
} else {
$(this).addClass("selected");
}
});
接下來是表格的展開和隱藏糙及。比如一個表格里分成好幾項详幽，如果點擊某一項的那就把這一項下面的所有行隱藏，這要先設(shè)計好html中的id和class才好操作丁鹉。
<table>
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>住所</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="row_01">
<td colspan="3">前臺設(shè)計組</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">后臺開發(fā)組</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="child_row_02">
<td>what</td>
<td>男</td>
<td>杭州</td>
</tr>
</tbody>
</table>
然后對每個class為parent的tr元素綁定click事件
$(document).ready(function(){
$("tr.parent").click(function(){
$(this).toggleClass("selected").siblings(".child_" + this.id).toggle("fast");
});
});
jQuery有一個filter()方法妒潭，可以篩選出符合選擇器的元素悴能。比如我們想把包含 李這個字的tr元素顯示出來
$("table tbody tr").hide().filter(":contains('李')").show();
首先把所有tr元素隱藏，然后選擇包含 李的tr元素顯示出來雳灾。
