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 实现图片无缝滚动
Dec 19 Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
Feb 22 Javascript
vue生成token并保存到本地存储中
Jul 17 Javascript
浅谈Webpack核心模块tapable解析
Sep 11 Javascript
Vuex 快速入门(简单易懂)
Sep 20 Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 Javascript
浅谈Javascript常用正则表达式应用
Mar 08 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
swiperjs实现导航与tab页的联动
Dec 13 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
PHPCMS的使用小结
2010/09/20 PHP
php操作SVN版本服务器类代码
2011/11/27 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
ThinkPHP入库出现两次反斜线转义及数据库类转义的解决方法
2014/11/04 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
php HTML无刷新提交表单
2016/04/05 PHP
微信红包随机生成算法php版
2016/07/21 PHP
PHP PDOStatement::setAttribute讲解
2019/02/01 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
javascript如何判断输入的url是否正确
2014/04/11 Javascript
javascript的函数作用域
2014/11/12 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
工作中常用到的ES6语法
2018/09/04 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
python实现下载整个ftp目录的方法
2017/01/17 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
python获取linux系统信息的三种方法
2020/10/14 Python
python 录制系统声音的示例
2020/12/21 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
康拓普公司Java笔面试
2016/09/23 面试题
机修工工作职责
2014/02/21 职场文书
学校花圃的标语
2014/06/18 职场文书
管辖权异议上诉状
2015/05/23 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书