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 相关文章推荐
js实现运行代码需要刷新的解决方法
Aug 18 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
jQuery中校验时间格式的正则表达式小结
Sep 22 Javascript
jquery中load方法的用法及注意事项说明
Feb 22 Javascript
javascript学习笔记(一)基础知识
Sep 30 Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
vue与iframe之间的信息交互的实现
Apr 08 Javascript
微信小程序实现首页弹出广告
Dec 03 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中关于php.ini参数优化详解
2020/02/28 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
Vue页面骨架屏的实现方法
2018/05/22 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
vue自定义全局共用函数详解
2018/09/18 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
python爬取网站数据保存使用的方法
2013/11/20 Python
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
python实现决策树分类
2018/08/30 Python
pytorch masked_fill报错的解决
2020/02/18 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
python re的findall和finditer的区别详解
2020/11/15 Python
欧舒丹美国官网:L’Occitane美国
2018/02/23 全球购物
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
Ado与Ado.net的相同与不同
2014/12/08 面试题
毕业生写求职信的要点
2014/03/04 职场文书
工程资料员岗位职责
2014/03/10 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
实习报告范文
2019/07/30 职场文书
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL