利用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 相关文章推荐
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
JavaScript CSS修改学习第三章 修改样式表
Feb 19 Javascript
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
jQuery.holdReady()方法用法实例
Dec 27 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
JavaScript 中的 this 简单规则
Sep 19 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
js实现的格式化数字和金额功能简单示例
Jul 30 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
Oct 25 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
Jun 10 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
留言板翻页的实现详解
2006/10/09 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
网页中的图片查看器viewjs使用方法
2017/07/11 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
sqlalchemy对象转dict的示例
2014/04/22 Python
整理Python 常用string函数(收藏)
2016/05/30 Python
python代码 if not x: 和 if x is not None: 和 if not x is None:使用介绍
2016/09/21 Python
Python队列的定义与使用方法示例
2017/06/24 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
手写一个python迭代器过程详解
2019/08/27 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
百度吧主申请感言
2014/01/12 职场文书
演讲稿开场白
2014/01/13 职场文书
简短大学毕业感言
2014/01/18 职场文书
师德模范事迹材料
2014/06/03 职场文书
初中毕业生感言
2015/07/31 职场文书