1.表格变色

（1）普通的隔行变色

CSS代码：

.even{background:#fff;}   //偶数行样式

.even{background:#fff;}   //奇数行样式

①包括表头

$(function(){ $("tr:odd").addClass("odd"); $("tr:even").addClass("even"); })

②不包括表头

$(function(){ $("tbody>tr:odd").addClass("odd"); $("tbody>tr:even").addClass("even"); })

③某一行高亮

$("tr:contains('王五')").addClass("selected");

2.单选框控制表格行高亮，即：单击某一行后，此行被选中高亮显示，且单选框被选中

步骤：给表格添加单击事件，给单击的当前行添加高亮样式，将它的兄弟行的高亮样式去掉，将当前行里的单选框设置为选中

$('tbody>tr').click(function(){ $(this) .addClass('selected') .siblings.removeClass('selected') .end() .find(':radio').attr('checked',true); });　

注释：①当前对象是$(this)，当进行.addClass('selected')操作时对象未发生变化，当执行.siblings.removeClass('selected')时，对象变为$(this).siblings()，如果需要重新返回到$(this)，就要使用end()方法

②如果表格初始化时，默认已经有单选框被选中，默认选中的行要被高亮显示

$('table:radio:checked').parent().parent().addClass('selected');

3.复选框控制表格行高亮

复选框能选则多行变色且不限制个数

单击某行时，如果已经高亮，移除高亮样式并去掉当前复选框的选中状态；若没高亮，添加高亮样式并将当前的复选框选中

判断是否已经高亮，使用hasClass()方法

$('tbaody>tr').click(function(){ if($(this).hasClass('selected')){ $(this) .removeClass('selected') .find('checkbox').attr('checked',false); }else{ $(this) .addClass('selected') .find('checkbox').attr('checked',true); } });

简化：

$('tbaody>tr').click(function(){ var hasSelected=$(this).hasClass('selected'); $(this).[hasSelected？"removeClass":"addClass"]('selected'); .find('checkbox').attr('checked',! hasSelected); });

4.表格展开关闭

<tr id=row_01><td colspan="3">前台设计组</td></tr> <tr><td>张三</td></tr> <tr><td>李四</td></tr>

给分类行设置了class="parent"属性以及id，子行设置了class属性，值在父id值得基础上加child

$(function(){ $('tr.parent').click(function(){ $(this) .toggleClass("selected"); .siblings('.child_'+this.id).toggle(); }); });

5.表格内容筛选→contains选择器+filter()筛选方法