JQuery对表格进行操作的常用技巧总结
更新时间:2014年04月23日 15:57:04 作者:
这篇文章主要介绍了JQuery对表格进行操作的常用技巧,需要的朋友可以参考下
1、表格奇数行和偶数行分别添加样式
$(function(){
$('tr:odd').addClass("odd");
$('tr:even').addClass("even");
});
不算表的头部
$(function(){
$('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{
$(this).addClass('selected')
.find(':checkbox').attr('checked',true);
}
});
4、表格内容筛选
$(function(){
$('table tbody tr').hide()
.filter(":contains(李)").show();
});
复制代码 代码如下:
$(function(){
$('tr:odd').addClass("odd");
$('tr:even').addClass("even");
});
不算表的头部
复制代码 代码如下:
$(function(){
$('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{
$(this).addClass('selected')
.find(':checkbox').attr('checked',true);
}
});
4、表格内容筛选
复制代码 代码如下:
$(function(){
$('table tbody tr').hide()
.filter(":contains(李)").show();
});
相关文章
jquery配合.NET实现点击指定绑定数据并且能够一键下载
本篇文章主要介绍了jquery配合.NET实现点击指定绑定数据并且能够一键下载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。2016-10-10ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
在做ajax页面无刷新添加的时候,IE下遭遇Ajax缓存,因为刚开始并不知道IE有这个坏毛病,折腾好久,终于解决问题,晒出来和大家分享,希望可以帮助你们2012-12-12
最新评论