js控制表单奇偶行样式的简单方法


Posted in Javascript onJuly 31, 2013

一、如果使用JQuery的话可以直接JQuery的

$("tr:odd").addClass("clazzName");

$("tr:even").addClass("clazzName");

二、如果是使用纯js的话

1.先获取table标签,var table = document.getElementById()

2.再获取里面的tbody标签var tbody = table.getElementsByTagName("tbody")[0]

3.再获取tr标签var trs = tbody.getElementsByTagName("tr")

4.然后迭代trs

for(var i=0; i

if(i%2==0){

trs[i].style.backgroundColor="red";

}else{

trs[i].style.backgroundColor="blue";

}

}

获取tbody标签是必须的,虽然你没写,但是浏览器在编译table的时候会自动给加上

所有的tr标签都是在tbody里面的

Javascript 相关文章推荐
JavaScript delete 属性的使用
Oct 08 Javascript
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
JS案例分享之金额小写转大写
May 15 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
vue父组件向子组件动态传值的两种方法
Nov 11 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
Three.js实现3D机房效果
Dec 30 Javascript
JavaScript继承与聚合实例详解
Jan 22 Javascript
js中parseInt函数浅谈
Jul 31 #Javascript
JavaScript中的关键字"VAR"使用详解 分享
Jul 31 #Javascript
JavaScript 和 Java 的区别浅析
Jul 31 #Javascript
javascript检查表单数据是否改变的方法
Jul 30 #Javascript
JS 对输入框进行限制(常用的都有)
Jul 30 #Javascript
JS无限极树形菜单,json格式、数组格式通用示例
Jul 30 #Javascript
js中widow.open()方法使用详解
Jul 30 #Javascript
You might like
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
深入PHP数据缓存的使用说明
2013/05/10 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
PHP中使用curl入门教程
2015/07/02 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
mailto的使用技巧分享
2012/12/21 Javascript
javascript判断并获取注册表中可信任站点的方法
2015/06/01 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
JQuery插件Marquee.js实现无缝滚动效果
2016/04/26 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
Ajax基础知识详解
2017/02/17 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
Vue-cli配置打包文件本地使用的教程图解
2018/08/02 Javascript
vue实现条件判断动态绑定样式的方法
2018/09/29 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
python一键升级所有pip package的方法
2017/01/16 Python
获取Django项目的全部url方法详解
2017/10/26 Python
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
python路径的写法及目录的获取方式
2019/12/26 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
致100米运动员广播稿
2014/02/14 职场文书
护士求职信
2014/07/05 职场文书
英语专业求职信
2014/07/08 职场文书
郭明义观后感
2015/06/08 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python