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 相关文章推荐
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
简单谈谈Javascript中类型的判断
Oct 19 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
JavaScript中的事件委托及好处
Jul 12 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
jquery插件bootstrapValidator数据验证详解
Nov 09 Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
vue router 传参获取不到的解决方式
Nov 13 Javascript
ES2020 新特性(种草)
Jan 12 Javascript
小程序实现上下切换位置
Nov 16 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
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
用文本作数据处理
2006/10/09 PHP
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
python 解析html之BeautifulSoup
2009/07/07 Python
Python 制作糗事百科爬虫实例
2016/09/22 Python
python 图像平移和旋转的实例
2019/01/10 Python
python实现五子棋小程序
2019/06/18 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
HTML5进度条特效
2014/12/18 HTML / CSS
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
P/Invoke是什么
2015/07/31 面试题
学生的自我鉴定范文
2013/10/24 职场文书
领导党性分析材料
2014/02/15 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
优秀护士事迹材料
2014/12/25 职场文书
父亲节活动总结
2015/02/12 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
HDFS免重启挂载新磁盘
2022/04/06 Servers
MySQL普通表如何转换成分区表
2022/05/30 MySQL
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python