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 相关文章推荐
jquery ajax请求实例深入解析
Nov 26 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
React性能优化系列之减少props改变的实现方法
Jan 17 Javascript
ES7之Async/await的使用详解
Mar 28 Javascript
javascript 数组精简技巧小结
Feb 26 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 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
Terran兵种介绍
2020/03/14 星际争霸
mysql 性能的检查和优化方法
2009/06/21 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
Laravel下生成验证码的类
2017/11/15 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
javascript css styleFloat和cssFloat
2010/03/15 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
javascript验证身份证号
2015/03/03 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
详解Python中的文本处理
2015/04/11 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
CSS3 实现飘动的云朵动画
2020/12/01 HTML / CSS
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
2019年Java 最常见的 面试题
2016/10/19 面试题
行政总监岗位职责
2013/12/05 职场文书
农民致富事迹材料
2014/01/23 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
2015个人半年总结范文
2015/03/09 职场文书
推荐信范文大全
2015/03/27 职场文书
借款民事起诉状范文
2015/05/19 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android
HTML+JS实现在线朗读器
2022/02/15 Javascript
全网非常详细的pytest配置文件
2022/07/15 Python