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入门之动态加载树代码
Apr 09 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
Dec 31 Javascript
web基于浏览器的本地存储方法应用
Nov 27 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
Jul 31 Javascript
Vue中this.$router.push参数获取方法
Feb 27 Javascript
JS实现动态生成html table表格的方法分析
Jul 11 Javascript
从零开始封装自己的自定义Vue组件
Oct 09 Javascript
功能完善的小程序日历组件的实现
Mar 31 Javascript
JS新手入门数组处理的实用方法汇总
Apr 07 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内存不够用的快速解决方法
2013/10/26 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
2010/11/16 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
详解webpack打包vue时提取css
2017/05/26 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
python自带的http模块详解
2016/11/06 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
python Pillow图像处理方法汇总
2019/10/16 Python
python解包用法详解
2021/02/17 Python
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
幼儿园美术教学反思
2014/01/31 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
初中学生评语大全
2014/04/24 职场文书
技术负责人任命书
2014/06/05 职场文书
室内趣味活动方案
2014/08/24 职场文书
个人租房协议书范本
2014/09/30 职场文书
2015年读书月活动总结
2015/03/26 职场文书
毕业实习证明范本
2015/06/16 职场文书
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS