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 相关文章推荐
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 Javascript
jQuery find和children方法使用
Jan 31 Javascript
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
Vue resource三种请求格式和万能测试地址
Sep 26 Javascript
JavaScript制作3D旋转相册
Aug 02 Javascript
vue学习笔记之作用域插槽实例分析
Feb 01 Javascript
Vue实现开关按钮拖拽效果
Sep 22 Javascript
微信小程序轮播图swiper代码详解
Dec 01 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+mysql一个名片库程序
2006/10/09 PHP
第十节--抽象方法和抽象类
2006/11/16 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
PHP闭包函数详解
2016/02/13 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
2013/04/03 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
javascript 闭包详解
2015/07/02 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
BootStrap实用代码片段之一
2016/03/22 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
python+pyqt实现12306图片验证效果
2017/10/25 Python
Java及python正则表达式详解
2017/12/27 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
Python urllib2运行过程原理解析
2020/06/04 Python
启动一个线程是用run()还是start()
2016/12/25 面试题
护理目标管理责任书
2014/07/25 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
民政局未婚证明
2015/06/15 职场文书
个人催款函范文
2015/06/24 职场文书
物业保洁员管理制度
2015/08/05 职场文书
新兵入伍决心书
2015/09/22 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python