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数组的使用
Mar 28 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
解析Javascript单例模式概念与实例
Dec 05 Javascript
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
详解vue2 $watch要注意的问题
Sep 08 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
JS使用正则表达式提交页面验证的代码
Oct 16 Javascript
Node.js API详解之 util模块用法实例分析
May 09 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 Javascript
vue使用echarts实现水平柱形图实例
Sep 09 Javascript
微信小程序中使用vant框架的具体步骤
Feb 18 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 进度条实现代码
2009/03/10 PHP
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
深入理解PHP中的count函数
2016/05/31 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
2006/10/19 Javascript
jquery UI 1.72 之datepicker
2009/12/29 Javascript
事件模型在各浏览器中存在差异
2010/10/20 Javascript
javascript天然的迭代器
2010/10/29 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
理解javascript中的原型和原型链
2015/07/30 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
2018/02/08 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
Python实现从百度API获取天气的方法
2015/03/11 Python
对Python中内置异常层次结构详解
2018/10/18 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
美国批发零售网站:GearXS
2016/07/26 全球购物
房屋买卖协议书范本
2014/04/10 职场文书
企业口号大全
2014/06/12 职场文书
作弊检讨书
2015/01/27 职场文书
检讨书范文1000字
2015/01/28 职场文书
党小组意见范文
2015/06/08 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
Oracle创建只读账号的详细步骤
2021/06/07 Oracle