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 class="parent" id=row_01><td colspan="3">前台设计组</td></tr>
<tr class="child_row_01"><td>张三</td></tr>
<tr class="child_row_02"><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()筛选方法