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 高亮显示文本中重要的关键字
Dec 24 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 Javascript
json数据处理及数据绑定
Jan 25 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
vue页面使用阿里oss上传功能的实例(二)
Aug 09 Javascript
JavaScript实现图片拖曳效果
Sep 08 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 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
php实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
php微信公众号开发之简答题
2018/10/20 PHP
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
javascript与cookie 的问题详解
2013/11/11 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
详解Node.js开发中的express-session
2017/05/19 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
Python使用chardet判断字符编码
2015/05/09 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
澳大利亚家具和家居用品在线:BROSA
2017/11/02 全球购物
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
自荐书4要点
2014/01/25 职场文书
讲解员培训方案
2014/05/04 职场文书
林肯就职演讲稿
2014/05/19 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
nginx配置文件使用环境变量的操作方法
2021/06/02 Servers
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技