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 相关文章推荐
Ext.MessageBox工具类简介
Dec 10 Javascript
js几秒以后倒计时跳转示例
Dec 26 Javascript
js子页面获取父页面数据示例
May 15 Javascript
js的延迟执行问题分析
Jun 23 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 Javascript
浅谈Vue的加载顺序探讨
Oct 25 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
Vue组件通信之Bus的具体使用
Dec 28 Javascript
js实现拾色器插件(ColorPicker)
May 21 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
解析百度搜索结果link?url=参数分析 (全)
2012/10/09 PHP
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
使用JS获取当前地理位置方法汇总
2014/12/18 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
轻松实现js选项卡切换效果
2016/09/24 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
Python中的连接符(+、+=)示例详解
2017/01/13 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
python IP地址转整数
2020/11/20 Python
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
电厂厂长岗位职责
2014/01/02 职场文书
《红军不怕远征难》教学反思
2014/04/14 职场文书
机关搬迁方案
2014/05/18 职场文书
销售团队激励口号
2014/06/06 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
2014年体育部工作总结
2014/11/13 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
python自动化调用百度api解决验证码
2021/04/13 Python