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中将HTMLCollection/NodeList/伪数组转换成数组的代码
Jul 31 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
AngularJS基础学习笔记之控制器
May 10 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 Javascript
Bootstrap 附加导航(Affix)插件实例详解
Jun 01 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
Feb 14 Javascript
Bootstrap输入框组件使用详解
Jun 09 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
解决element UI 自定义传参的问题
Aug 22 Javascript
解决vue热替换失效的根本原因
Sep 19 Javascript
利用jsonp解决js读取本地json跨域的问题
Dec 11 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
自动跳转中英文页面
2006/10/09 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
Codeigniter的一些优秀特性总结
2015/01/21 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
js null undefined 空区别说明
2010/06/13 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
Python读写docx文件的方法
2018/05/08 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
Anaconda使用IDLE的实现示例
2020/09/23 Python
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
服装公司总经理岗位职责
2013/11/30 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
演讲比赛策划方案
2014/06/11 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
公司职员入党自传书
2015/06/26 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
Python+Appium新手教程
2021/04/17 Python
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫