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 相关文章推荐
解析jquery中的ajax缓存问题
Dec 19 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
基于javascript实现根据身份证号码识别性别和年龄
Jan 22 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 Javascript
详解nginx配置vue h5 history去除#号
Nov 09 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中魔术变量__METHOD__与__FUNCTION__的区别
2014/09/29 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
js显示时间 js显示最后修改时间
2013/01/02 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
python基本语法练习实例
2017/09/19 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
html5 canvas绘制放射性渐变色效果
2018/01/04 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
党支部综合考察材料
2014/05/19 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
物业管理专业求职信
2014/06/11 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
2014年营销工作总结
2014/11/22 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
z-index不起作用
2021/03/31 HTML / CSS
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android