jQuery对表格的操作

首先讲最简单的隔行变色操作。首先定义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");
});

有单选表格高亮就还有高选表格高亮。点击某一行就高亮，如果这一行已经高亮就取消高亮。

$("tbody tr").click(function(){
  if($(this).hasClass("selected")){
    $(this).removeClass("selected");
  } else {
    $(this).addClass("selected");
  }
});

接下来是表格的展开和隐藏。比如一个表格里分成好几项，如果点击某一项的那就把这一项下面的所有行隐藏，这要先设计好html中的id和class才好操作。

<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="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元素显示出来。