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高级程序设计》阅读笔记(二) ECMAScript中的原始类型
Feb 27 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 Javascript
Bootstrap3 Grid system原理及应用详解
Sep 30 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
select2 ajax 设置默认值,初始值的方法
Aug 09 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 Javascript
vue引入静态js文件的方法
Jun 20 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 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+jQuery+Ajax实现分页效果 jPaginate插件的应用
2015/10/09 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
JavaScript 调试器简介
2009/02/21 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
2017/03/17 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
Python编程修改MP3文件名称的方法
2017/04/19 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
Python实现学生成绩管理系统
2020/04/05 Python
Python实现的购物车功能示例
2018/02/11 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
使用python 3实现发送邮件功能
2018/06/15 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
django框架使用方法详解
2019/07/18 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
Footshop法国:购买运动鞋
2020/01/19 全球购物
Yahoo-PHP面试题4
2012/05/05 面试题
医学生求职自荐书
2014/06/12 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
联村联户简报
2015/07/21 职场文书
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
Python实现排序方法常见的四种
2021/07/15 Python