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 相关文章推荐
关于使用runtimeStyle属性问题讨论文章
Mar 08 Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
Javascript限制网页只能在微信内置浏览器中访问
Nov 09 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
如何使用jquery easyui创建标签组件
Nov 18 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
javascript断点调试心得分享
Apr 23 Javascript
深入理解js数组的sort排序
May 28 Javascript
jQuery实现导航回弹效果
Feb 27 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
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/08/07 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
基于jQuery实现二级下拉菜单效果
2016/02/01 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
浅谈function(函数)中的动态参数
2017/04/30 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
基于python绘制科赫雪花
2018/06/22 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
python监控nginx端口和进程状态
2019/09/06 Python
python设置随机种子实例讲解
2019/09/12 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
ktv收银员岗位职责
2013/12/16 职场文书
亲子读书活动方案
2014/02/22 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
分公司经理任命书
2014/06/05 职场文书
计划生育标语
2014/06/23 职场文书
综合测评自我评价
2015/03/06 职场文书
道歉信范文
2015/05/12 职场文书
董事长新年致辞
2015/07/29 职场文书