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模板技术
Apr 27 Javascript
ASP SQL防注入的方法
Dec 25 Javascript
JavaScript入门教程(2) JS基础知识
Jan 31 Javascript
javascript原型链继承用法实例分析
Jan 28 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
详解react如何在组件中获取路由参数
Jun 15 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 Javascript
JS使用正则表达式判断输入框失去焦点事件
Oct 16 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 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
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
php获取url参数方法总结
2014/11/13 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
详解vue axios二次封装
2018/07/22 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
Python下调用Linux的Shell命令的方法
2018/06/12 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
Python request使用方法及问题总结
2020/04/26 Python
python dict乱码如何解决
2020/06/07 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
美国网上花店:JustFlowers
2017/02/12 全球购物
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
团结主题班会
2015/08/13 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js
Python入门之使用pandas分析excel数据
2021/05/12 Python
flex弹性布局详解
2022/03/20 HTML / CSS
设置IIS Express并发数
2022/07/07 Servers