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:void(0)的真正含义实例分析
Aug 20 Javascript
jQuery :first选择器使用介绍
Aug 09 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
前端MVVM框架解析之双向绑定
Jan 24 Javascript
js实现百度登录窗口拖拽效果
Mar 19 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 Javascript
js实现自定义滚动条的示例
Oct 27 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
php运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
用PHP读取和编写XML DOM的实现代码
2011/02/03 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
如何使用php实现评委评分器
2015/07/31 PHP
详解Yii实现分页的两种方法
2017/01/14 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
一些mootools的学习资源
2010/02/07 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
vue $set 给数据赋值的实例
2019/11/09 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
python中使用print输出中文的方法
2018/07/16 Python
python批量修改图片大小的方法
2018/07/24 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
python Matplotlib模块的使用
2020/09/16 Python
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
EJB的角色和三个对象
2015/12/31 面试题
电钳专业个人求职信
2014/01/04 职场文书
实习单位评语
2014/04/26 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
《窃读记》教学反思
2016/02/18 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书
MySQL表字段时间设置默认值
2021/05/13 MySQL
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python