JQuery对表格进行操作的常用技巧。
1、表格奇数行和偶数行分别添加样式
复制代码代码如下:
$(function(){
$(\'tr:odd\').addClass("odd");
$(\'tr:even\').addClass("even");
});
不算表的头部
复制代码代码如下:
$(function(){
$(\'tbody>tr:odd\').addClass("odd");
$(\'tbody>tr:even\').addClass("even");
});
$(\'tbody>tr:odd\').addClass("odd");
$(\'tbody>tr:even\').addClass("even");
});
2、单选框控制行的高亮显示
复制代码代码如下:
$(\'tobdy>tr\').click(function(){
$(this).addClass(\'selected\')
.siblings().removeClass(\'selected\')
.end() // 重新返回该对象
.find(\':radio\').attr(\'checked\',true);
});
3、复选框控制行的高亮显示
复制代码代码如下:
$(\'tobdy>tr\').click(function(){
if( $(this).hasClass(\'selected\') ){ // 判断是否有selected高亮样式
$(this).removeClass(\'selected\')
.find(\':checkbox\').attr(\'checked\',false);
}else{ www.jbxue.com
$(this).addClass(\'selected\')
.find(\':checkbox\').attr(\'checked\',true);
}
});
if( $(this).hasClass(\'selected\') ){ // 判断是否有selected高亮样式
$(this).removeClass(\'selected\')
.find(\':checkbox\').attr(\'checked\',false);
}else{ www.jbxue.com
$(this).addClass(\'selected\')
.find(\':checkbox\').attr(\'checked\',true);
}
});
4、表格内容筛选
复制代码代码如下:
$(function(){
$(\'table tbody tr\').hide()
.filter(":contains(李)").show();
});