利用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获取flash加载的百分比的实现代码
May 25 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
JavaScript插件化开发教程(五)
Feb 01 Javascript
初步认识JavaScript函数库jQuery
Jun 18 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
基于jQuery实现表格内容的筛选功能
Aug 21 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 Javascript
全面了解JavaScript的作用域链
Apr 03 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
PHP生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
Ajax+PHP快速上手及简单应用说明
2013/07/24 PHP
php 解决扫描二维码下载跳转问题
2017/01/13 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
ES6 十大特性简介
2020/12/09 Javascript
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
解读Python中degrees()方法的使用
2015/05/18 Python
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
查看Django和flask版本的方法
2018/05/14 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
贫困生证明范文
2015/06/16 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python
Python预测分词的实现
2021/06/18 Python