jQuery 选择表格(table)里的行和列及改变简单样式


Posted in Javascript onDecember 15, 2012

jQuery对表格(table)的处理提供了相当强大的功能,比如说对表格特定行(row)或列(column)进行排序、样式改变等等。如果你的英文够好,你可以读读这篇文章:jQuery table manipulation。本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助。

比如我们有这样一个表格

第一列 第二列 第三列 第四列
第一列 第二列 第三列 第四列
第一列 第二列 第三列 第四列
第一列 第二列 第三列 第四列
第一列 第二列 第三列 第四列

对行进行操作比较简单
1.如果我们要选择第一行,我们可以用 $("tr:eq(0)")
2.如果我们要选择第N行,我们可以用 $("tr:eq(n-1)")
3.如果我们要选择奇数行,我们可以用 $("tr:odd")
4.如果我们要选择偶数行,我们可以用 $("tr:even")
对列的操作相对麻烦一点,但是如果我们知道了其中原理也不难。表格里没有列的元素,第一列实际上是每一行的第一个区域(td)的组合。所以我们可以用循环来实现对行的选择。
1.如果我们要选择第一列并且对其样式进行改变,我们可以用下面的语句来实现
$(document).ready(function(){ 
$("table").find("td").each(function(i){//搜寻表格里的每一个区间 
if(i%4 == 0){ //‘4'代表表格总共有4列,如果区间编号被4整除,那么它就属于第一列 
$(this).addClass("col_1");}//给区间加上特定样式 
}); 
});

2.如果我们要选择其它列,只需把上述代码里的i%4==0,进行相应的改变。记住:4代表表格的列数,如果你有10列就用10代替;选择第一列,余数等于0,选择第二列,余数应该等于1,如此类推。
更新(2009/10/20):感?JOE的?充!我的方法要人?榈母?谋淼牧?担??OE的方法不但代???味?也皇芰?档南拗啤
$(document).ready(function(){ 
$("#button1").click(function(){ 
$("#demo1 tr").each(function() { 
$(this).find("td:first").css({color:"red", fontWeight:"bold"}); 
}); 
}); 
});

另外?可以改???衿?亩?淖?偶?盗谢蛘咂?盗小W⒁猓旱谝涣???始,所以td:odd代表偶?盗小
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#10200902").click(function(){ 
$("#demo1 tr").each(function() { 
//alert("me"); 
$(this).find("td:odd").css({color:"green", fontWeight:"bold"}); 
}); 
}); 
}); 
</script> 
//注意:第一列???始,所以td:odd代表偶?盗 
<button id="10200902">点击改变以上表格的偶?盗?lt;/button>
Javascript 相关文章推荐
JavaScript中property和attribute的区别详细介绍
Mar 03 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
jquery validate表单验证插件
Sep 06 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
node.js 抓取代理ip实例代码
Apr 30 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 Javascript
vue-cli —— 如何局部修改Element样式
Oct 22 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 #Javascript
js 操作select和option常用代码整理
Dec 13 #Javascript
JavaScript 产生不重复的随机数三种实现思路
Dec 13 #Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
Dec 13 #Javascript
js onkeypress与onkeydown 事件区别详细说明
Dec 13 #Javascript
javascript 文件的同步加载与异步加载实现原理
Dec 13 #Javascript
javaScript复制功能调用实现方案
Dec 13 #Javascript
You might like
中国第一家无线电行
2021/03/01 无线电
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
php中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
PHP模拟post提交数据方法汇总
2016/02/16 PHP
php文件上传类的分享
2017/07/06 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
浅谈mint-ui 填坑之路
2017/11/06 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
Python实现数值积分方式
2019/11/20 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
Linux上比较文件的命令都有哪些
2012/02/24 面试题
毕业生求职简历中的自我评价
2013/10/18 职场文书
大学生蛋糕店创业计划书
2014/01/13 职场文书
建议书标准格式
2014/03/12 职场文书
历史学专业求职信
2014/06/19 职场文书
保研推荐信格式
2015/03/25 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书