jQuery对表格的操作
表格变色
1.普通的隔行变色
HTML代码：
姓名 性别 居住地 张山 男 浙江宁波 lisa 男 广东深圳 willow 女 湖南长沙 lemon 男 浙江杭州 奥利 女 浙江温州
CSS代码：
$(function(){
$("tbody>tr:even").addClass("even");//给tbody中的奇数行添加样式
$("tbody>tr:odd").addClass("odd");//给tbody中的偶数行添加样式
$("tr:contains('lisa')").addClass("selected"); //将某一行高亮显示状态
})显示效果：
2.单选按钮控制表格行高亮
在上面表格的基础上增加一列单选框
- 为表格行添加点击事件
- 给单击的当前行添加高亮样式，然后把他的兄弟行的高亮样式去掉，最后将当前行里的单选按钮设置为选中
姓名 性别 居住地 张山 男 浙江宁波 lisa 男 广东深圳 willow 女 湖南长沙 lemon 男 浙江杭州 奥利 女 浙江温州
jQuery代码：
$("tbody>tr").click(function(){
$(this).addClass("selected")
.siblings().removeClass("selected")
.end()
.find(':radio').attr("checked",true)
})显示效果：
3.复选框控制表格行高亮
姓名 性别 居住地 张山 男 浙江宁波 lisa 男 广东深圳 willow 女 湖南长沙 lemon 男 浙江杭州 奥利 女 浙江温州
jQuery代码：
$("tbody>tr").click(function(){
if($(this).hasClass('selected')){
$(this).removeClass('selected').find(":checkbox").attr("checked",false)
}else{
$(this).addClass('selected').find(":checkbox").attr("checked",true)
}
})显示效果：
表格展开关闭
当点击表格的父行后，相应的子行会收缩。
姓名 性别 居住地 前端开发组
张山 男 浙江宁波 lisa 男 广东深圳 UI设计组
willow 女 湖南长沙 lemon 男 浙江杭州 Java开发组
奥利 女 浙江温州
jQuery代码：
$(".parent").click(function(){
$(this).toggleClass("selected")//添加/删除高亮
.siblings(".child_"+this.id).toggle();//隐藏/显示所谓的子行
})显示效果：
表格内容筛选
筛选出含有文本的表格行
$(".filterName").keyup(function(){
$("table tbody tr").hide()
.fliter(":contains('"+( $(this).val() )+"')").show();
})
