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 对象比较实现代码
Apr 27 Javascript
jquery1.4 教程二 ajax方法的改进
Feb 25 Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 Javascript
Vue服务器渲染Nuxt学习笔记
Jan 31 Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 Javascript
微信小程序静默登录的实现代码
Jan 08 Javascript
uni-app实现获取验证码倒计时功能
Nov 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的FTP学习(二)[转自奥索]
2006/10/09 PHP
一个简单的PHP&amp;MYSQL留言板源码
2020/07/19 PHP
php Rename 更改文件、文件夹名称
2011/05/24 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
javascript实现的网页局布刷新效果
2008/12/01 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
JavaScript学习笔记之惰性函数示例详解
2017/08/27 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
vue实现购物车小案例
2019/09/27 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
Python实现XML文件解析的示例代码
2018/02/05 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
python第三方库学习笔记
2020/02/07 Python
Python如何给你的程序做性能测试
2020/07/29 Python
Why we need EJB
2016/10/20 面试题
银行优秀员工事迹
2014/02/06 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
安全教育观后感
2015/06/17 职场文书
在项目中使用redis做缓存的一些思路
2021/09/14 Redis
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers