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 相关文章推荐
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
基于canvas实现的钟摆效果完整实例
Jan 26 Javascript
javascript 继承学习心得总结
Mar 17 Javascript
JavaScript中子对象访问父对象的方式详解
Sep 01 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
JavaScript高阶函数_动力节点Java学院整理
Jun 28 Javascript
js实现简易聊天对话框
Aug 17 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
详解Vue This$Store总结
Dec 17 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 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的分页功能
2007/03/21 PHP
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
PHP7常量数组用法分析
2016/09/26 PHP
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
Python实现将文本生成二维码的方法示例
2017/07/18 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
pandas取出重复数据的方法
2019/07/04 Python
Python图片的横坐标汉字实例
2019/12/04 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
经典广告词大全
2014/03/14 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书
高二化学教学反思
2016/02/22 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
Python内置包对JSON文件数据进行编码和解码
2022/04/12 Python