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 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
Dec 28 Javascript
优化javascript的执行速度
Jan 23 Javascript
javascript中常用编程知识
Apr 08 Javascript
javascrip关于继承的小例子
May 10 Javascript
浅析hasOwnProperty方法的应用
Nov 20 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 Javascript
javascript中的面向对象
Mar 30 Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
让网站自动生成章节目录索引的多个js代码
Jan 07 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 Javascript
手把手教你实现 Promise的使用方法
Sep 02 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 前一天或后一天的日期
2008/06/28 PHP
PHP用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
PHP的自定义模板引擎
2017/03/24 PHP
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
微信小程序以ssm做后台开发的实现示例
2020/04/08 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
Python中字符串的格式化方法小结
2016/05/03 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
使用Python函数进行模块化的实现
2019/11/15 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
邮政员工辞职信
2014/01/16 职场文书
医药类个人求职的自我评价
2014/02/12 职场文书
大学生全国两会报告感想
2014/03/17 职场文书
论文致谢词范文
2015/05/14 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书