jquery交替变换颜色的三种方法 实例代码


Posted in Javascript onNovember 19, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>even and odd</title>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
    alert("第一种");
    $("tbody tr:even").css("background-color", "red");
    $("tbody tr:odd").css("background-color", "yellow");
    alert("第二种");
    $("tbody tr").each(function (index){
                            alert(index);    
                            if(0 == index%2)
                            {
                                $(this).css("background-color", "blue");   
                            }
                            if(1 == index%2)
                            {
                                $(this).css("background-color", "green");   
                            }
                      });
    alert("第三种");
    rows = document.getElementsByTagName("tr");
    var length = rows.length;
    for(var i=0; i< length;i++){
       alert(i);
       if(0==i%2){
           rows[i].style.backgroundColor="#ffff00";
       }else
       {
           rows[i].style.backgroundColor="#0000FF";
       }       
   }
});
</script>
</head>
<body>
<table border="1">
<tbody >
    <tr> <td>aaa</td> <td>aaa</td> <td>aaa</td></tr>
    <tr> <td>bbb</td> <td>bbb</td> <td>bbb</td></tr>
    <tr> <td>aaa</td> <td>aaa</td> <td>aaa</td></tr>
    <tr> <td>bbb</td> <td>bbb</td> <td>bbb</td></tr>
    <tr> <td>aaa</td> <td>aaa</td> <td>aaa</td></tr>
    <tr> <td>bbb</td> <td>bbb</td> <td>bbb</td></tr>
</tbody>
</table>
</body>
</html>
Javascript 相关文章推荐
javascript firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
Mar 28 Javascript
jQuery.getScript加载同域JS的代码
Feb 13 Javascript
jquery实现删除一个元素后面的所有元素功能
Dec 21 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
js实现城市级联菜单的2种方法
Jun 23 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 Javascript
你点的 ES6一些小技巧,请查收
Apr 25 Javascript
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 #Javascript
详解jQuery插件开发中的extend方法
Nov 19 #Javascript
Js 导出table内容到Excel的简单实例
Nov 19 #Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 #Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 #Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 #Javascript
js计算两个时间之间天数差的实例代码
Nov 19 #Javascript
You might like
PHP 循环列出目录内容的函数代码
2010/05/26 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
详解JS函数重载
2014/12/04 Javascript
JavaScript保留关键字汇总
2015/12/01 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
2017/08/04 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
2018/03/13 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
JavaScript事件对象深入详解
2018/12/30 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
python实现微信远程控制电脑
2018/02/22 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
python ssh 执行shell命令的示例
2020/09/29 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
你对IPv6了解程度
2016/02/09 面试题
事业单位请假制度
2014/01/13 职场文书
火车的故事教学反思
2014/02/11 职场文书
中国好声音广告词
2014/03/18 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL