利用JQuery和JS实现奇偶行背景颜色自定义效果


Posted in Javascript onNovember 19, 2012

JQuery实现:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>New Web Project</title> 
<script type="text/javascript" src="jquery-core/jquery-1.8.0.js"></script> 
<script type="text/javascript"> 
$(function(){ 
//可以是:$('#t1 tbody tr:even').css('background','red'); 
$('#t1 > tbody tr:even').css('background','red'); 
$('#t1 > tbody tr:odd').css('background','blue'); 
}); 
</script> 
</head> 
<body> 
<table id="t1" width="500px" align="center"> 
<tbody>  
<tr><td>aaaaaaa</td></tr> 
<tr><td>bbbbbbb</td></tr> 
<tr><td>ccccccc</td></tr> 
<tr><td>ddddddd</td></tr> 
<tr><td>eeeeeee</td></tr> 
<tr><td>fffffff</td></tr> 
<tr><td>ggggggg</td></tr> 
<tr><td>hhhhhhh</td></tr> 
</tbody> 
</table> 

</body> 
</html>

JS实现:
<span style="color:#333333;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>New Web Project</title> <script type="text/javascript"> 
//页面加载事件 
window.onload=function(){ 
//获取table 
var tb1 = document.getElementById("t1"); 
//获取table中的tbody 
var tbody = tb1.getElementsByTagName("tbody")[0]; 
//获取tr 
var trs = tbody.getElementsByTagName("tr"); 
//根据奇、偶行显示不同的背景颜色 
for(var i=0; i<trs.length;i++){ 
if(i%2==0){ 
trs[i].style.backgroundColor="red"; 
}else{ 
trs[i].style.backgroundColor="blue"; 
} 
} 
} 
</script> 
</head> 
<body> 
<table id="t1" width="500px" align="center"> 
<tbody> 
<tr><td>aaaaaaa</td></tr> 
<tr><td>bbbbbbb</td></tr> 
<tr><td>ccccccc</td></tr> 
<tr><td>ddddddd</td></tr> 
<tr><td>eeeeeee</td></tr> 
<tr><td>fffffff</td></tr> 
<tr><td>ggggggg</td></tr> 
<tr><td>hhhhhhh</td></tr> 
</tbody> 
</table> 
</body> 
</html>
Javascript 相关文章推荐
js loading加载效果实现代码
Nov 24 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
3种js实现string的substring方法
Nov 09 Javascript
javascript实现列表切换效果
May 02 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
Mar 19 Javascript
axios学习教程全攻略
Mar 26 Javascript
详解原生js实现offset方法
Jun 15 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
React+Antd+Redux实现待办事件的方法
Mar 14 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 #Javascript
基于jquery库的tab新形式使用
Nov 16 #Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 #Javascript
javascript 图片裁剪技巧解读
Nov 15 #Javascript
中国地区三级联动下拉菜单效果分析
Nov 15 #Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 #Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 #Javascript
You might like
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
通过文字传递创建的图形按钮
2006/10/09 PHP
php 无限分类的树类代码
2009/12/03 PHP
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
python list 合并连接字符串的方法
2013/03/09 Python
深入Python解释器理解Python中的字节码
2015/04/01 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
Python3最长回文子串算法示例
2019/03/04 Python
python nmap实现端口扫描器教程
2020/05/28 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
美国时尚在线:Showpo
2017/09/08 全球购物
override和overload的区别
2016/03/09 面试题
自我鉴定书范文
2013/10/02 职场文书
北京大学自荐信范文
2014/01/28 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
高中社区服务活动报告
2015/02/05 职场文书
财务稽核岗位职责
2015/04/13 职场文书
雷锋的故事观后感
2015/06/10 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书