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 相关文章推荐
Extjs学习笔记之九 数据模型(上)
Jan 11 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
Mar 14 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
JavaScript中this详解
Sep 01 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
js随机生成一个验证码
Jun 01 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
JavaScript中concat复制数组方法浅析
Jan 20 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 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脚本数据库功能详解(上)
2006/10/09 PHP
Wordpress php 分页代码
2009/10/21 PHP
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
ThinkPHP中order()使用方法详解
2016/04/19 PHP
php使用pdo连接sqlite3的配置示例
2016/05/27 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
一些不错的js函数ajax
2008/08/20 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
Require.js的基本用法详解
2017/07/03 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
详解JS中的柯里化(currying)
2017/08/17 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
一个简单的python程序实例(通讯录)
2013/11/29 Python
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
Python编程使用tkinter模块实现计算器软件完整代码示例
2017/11/29 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
详解python while 函数及while和for的区别
2018/09/07 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
提升Python程序性能的7个习惯
2019/04/14 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
浅析python中的del用法
2020/09/02 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
英国钻石公司:British Diamond Company
2020/02/16 全球购物
淘宝好评语大全
2014/05/05 职场文书
Python闭包的定义和使用方法
2022/04/11 Python