JQuery对表格进行操作的常用技巧总结


Posted in Javascript onApril 23, 2014

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(); 
});
Javascript 相关文章推荐
jQuery对象和DOM对象使用说明
Jun 25 Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
jQuery代码优化之基本事件
Nov 01 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
js全选按钮的实现方法
Nov 17 Javascript
jQuery mobile 移动web(6)
Dec 20 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
实例讲解vue源码架构
Jan 24 Javascript
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
IE6已终止操作问题的2种情况及解决
Apr 23 #Javascript
三种检测iPhone/iPad设备方向的方法
Apr 23 #Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 #Javascript
javascript数字时钟示例分享
Apr 23 #Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 #Javascript
iframe实用操作锦集
Apr 22 #Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
Apr 22 #Javascript
You might like
php通用防注入程序 推荐
2011/02/26 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
this在vue和小程序中的使用详解
2019/01/28 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
[01:33:30]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第二场 2月5日
2021/03/11 DOTA
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
python多线程抽象编程模型详解
2019/03/20 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
经典优秀个人求职信分享
2013/12/12 职场文书
四个太阳教学反思
2014/02/01 职场文书
个人委托书怎么写
2014/04/04 职场文书
团委竞选演讲稿
2014/04/24 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
领导欢迎词致辞
2015/01/23 职场文书
2015高考寄语集锦
2015/02/27 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers
阿里云日志过滤器配置日志服务
2022/04/09 Servers
KVM基础命令详解
2022/04/30 Servers