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提交多个表单的小例子
Jun 30 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
javascript操作excel生成报表示例
May 08 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
ES6新特性之Object的变化分析
Mar 31 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
详解redux异步操作实践
Aug 15 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 Javascript
ECharts transform数据转换和dataZoom在项目中使用
Dec 24 Javascript
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
加速XP搜索功能堪比vista
2007/03/22 PHP
php4与php5的区别小结(配置异同)
2011/12/20 PHP
php动态实现表格跨行跨列实现代码
2012/11/06 PHP
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
jQuery实现checkbox全选的方法
2015/06/10 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
学习JavaScript设计模式(封装)
2015/11/26 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
JS判断数组那点事
2017/10/10 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
python图像处理之反色实现方法
2015/05/30 Python
详解Python文本操作相关模块
2017/06/22 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
pandas通过索引进行排序的示例
2018/11/16 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
python批量图片处理简单示例
2019/08/06 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
python dataframe NaN处理方式
2019/12/26 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
JPA的特点
2014/10/25 面试题
英文自我鉴定
2013/12/10 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
工作服管理制度范本
2015/08/06 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL