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 相关文章推荐
农历与西历对照
Sep 06 Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 Javascript
js实现类似新浪微博首页内容渐显效果的方法
Apr 10 Javascript
window.location.hash知识汇总
Nov 09 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 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/02/03 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
laravel自定义分页效果
2017/07/23 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
python数据结构之二叉树的建立实例
2014/04/29 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
python 工具 字符串转numpy浮点数组的实现
2020/03/14 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
捐书寄语赠言
2014/01/18 职场文书
大宝sod蜜广告词
2014/03/21 职场文书
农民工工资发放承诺书
2014/03/31 职场文书
综合内勤岗位职责
2014/04/14 职场文书
开除通知书范本
2015/04/25 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
Python django中如何使用restful框架
2021/06/23 Python
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记