利用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 相关文章推荐
javascript实现的距离现在多长时间后的一个格式化的日期
Oct 29 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
JS中Array数组学习总结
Jan 18 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
微信小程序开发之tabbar图标和颜色的实现
Oct 17 Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 Javascript
javaScript实现游戏倒计时功能
Nov 17 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 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
相对路径转化成绝对路径
2007/04/10 PHP
php的4种常见运行方式
2015/03/20 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
php文件上传类的分享
2017/07/06 PHP
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
2015/01/09 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
JavaScript中undefined和null的区别
2017/05/03 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
vue.js配合$.post从后台获取数据简单demo分享
2018/08/11 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
python中kmeans聚类实现代码
2018/02/23 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
yy司仪主持词
2014/03/22 职场文书
商务英语求职信范文
2015/03/19 职场文书
2015年后勤工作总结范文
2015/04/08 职场文书
学校财务管理制度
2015/08/04 职场文书
六一亲子活动感想
2015/08/07 职场文书