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 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
Sea.JS知识总结
May 05 Javascript
jQuery select自动选中功能实现方法分析
Nov 28 Javascript
vue组件通信传值操作示例
Jan 08 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
原生js生成图片验证码
Oct 11 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
文件系统基本操作类
2006/11/23 PHP
谈PHP生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
python3.3实现乘法表示例
2014/02/07 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
Opencv求取连通区域重心实例
2020/06/04 Python
python3.7添加dlib模块的方法
2020/07/01 Python
Python与C/C++的相互调用案例
2021/03/04 Python
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
init进程的作用
2012/04/12 面试题
体育专业个人的求职信范文
2013/09/21 职场文书
跟单文员岗位职责
2014/01/03 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
生产文员岗位职责
2014/04/05 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
保护动物的宣传语
2015/07/13 职场文书
领导新年致辞2016
2015/07/29 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
python可视化大屏库big_screen示例详解
2021/11/23 Python
详解Python内置模块Collections
2022/03/22 Python