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获取地址栏参数
Dec 22 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
javascript实现浏览器窗口传递参数的方法
Sep 03 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
Jun 22 Javascript
加载 vue 远程代码的组件实例详解
Nov 20 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 Javascript
JS使用iView的Dropdown实现一个右键菜单
May 06 Javascript
WebSocket的简单介绍及应用
May 23 Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 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页面消耗内存过大的处理办法
2013/03/18 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2016/02/25 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
IntelliJ IDEA 安装vue开发插件的方法
2017/11/21 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
python实现复制整个目录的方法
2015/05/12 Python
Python在Console下显示文本进度条的方法
2016/02/14 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
Python pip使用超时问题解决方案
2020/08/03 Python
python 多线程中join()的作用
2020/10/29 Python
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
外企C语言笔试题
2013/11/10 面试题
SQL语言面试题
2013/08/27 面试题
大学生饮食配送创业计划书
2014/01/04 职场文书
中式婚礼主持词
2014/03/13 职场文书
材料员岗位职责
2014/03/13 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python