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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
js表格分页实现代码
Sep 18 Javascript
下拉菜单点击实现连接跳转功能的js代码
May 19 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
Oct 19 Javascript
AngularJS基础 ng-submit 指令简单示例
Aug 03 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 Javascript
深入探究node之Transform
Jul 20 Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 Javascript
vue脚手架搭建过程图解
Jun 06 Javascript
浅谈在react中如何实现扫码枪输入
Jul 04 Javascript
Javascript实现关闭广告效果
Jan 29 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
详解yii2使用多个数据库的案例
2017/06/16 PHP
PHP延迟静态绑定的深入讲解
2018/04/02 PHP
页面装载js及性能分析方法介绍
2014/03/21 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
js闭包的用途详解
2014/11/09 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
form+iframe解决跨域上传文件的方法
2016/11/18 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
React中使用UMEditor的方法示例
2019/12/27 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
python sort、sort_index方法代码实例
2019/03/28 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
公司财务自我评价分享
2013/12/17 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
民事调解书范文
2015/05/20 职场文书
结婚仪式主持词
2015/06/29 职场文书
2015年大学迎新工作总结
2015/07/16 职场文书
Python中快速掌握Data Frame的常用操作
2021/03/31 Python
整理Python中常用的conda命令操作
2021/06/15 Python
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS