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运行js时提示允许阻止内容运行的解决方法
Oct 24 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
Sep 24 Javascript
学习Node.js模块机制
Oct 17 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 Javascript
小程序接入腾讯位置服务的详细流程
Mar 03 Javascript
微信小程序pinker组件使用实现自动相减日期
May 07 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 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
Protoss魔法科技
2020/03/14 星际争霸
用PHP和ACCESS写聊天室(八)
2006/10/09 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
ajax java 实现自动完成功能
2012/12/19 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
Vue的Options用法说明
2020/08/14 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
Python检测QQ在线状态的方法
2015/05/09 Python
python实现单向链表详解
2018/02/08 Python
Python并行分布式框架Celery详解
2018/10/15 Python
python异步存储数据详解
2019/03/19 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
乡镇三严三实学习心得体会
2014/10/13 职场文书
党员检讨书
2014/10/13 职场文书
Python基础详解之邮件处理
2021/04/28 Python