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 delete 使用示例代码
Mar 29 Javascript
C++中的string类的用法小结
Aug 07 Javascript
js获取鼠标位置实例详解
Dec 09 Javascript
jquery中ajax跨域方法实例分析
Dec 18 Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
微信小程序合法域名配置方法
May 06 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
JavaScript 防篡改对象的用法示例
Apr 24 Javascript
微信小程序中wxs文件的一些妙用分享
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的错误信息
2006/10/09 PHP
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
Python中IPYTHON入门实例
2015/05/11 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
python实现批量按比例缩放图片效果
2018/03/30 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
Python对象与引用的介绍
2019/01/24 Python
通过cmd进入python的实例操作
2019/06/26 Python
Python实现序列化及csv文件读取
2020/01/19 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
师范生实习的个人自我鉴定
2013/10/20 职场文书
志愿者活动总结
2014/04/28 职场文书
环保倡议书500字
2014/05/15 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
交通事故被告答辩状
2015/05/22 职场文书
天河观后感
2015/06/11 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
Python软件包安装的三种常见方法
2022/07/07 Python