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 相关文章推荐
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
Jun 20 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
Jul 13 Javascript
webpack开发跨域问题解决办法
Aug 03 Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 Javascript
利用Electron简单撸一个Markdown编辑器的方法
Jun 10 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
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对象递归引用造成内存泄漏分析
2014/08/28 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
PHP调用其他文件中的类
2018/04/02 PHP
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
js实现微信分享代码
2020/10/11 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
Python 创建空的list,以及append用法讲解
2018/05/04 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
舞会礼服和舞会鞋:PromGirl
2019/04/22 全球购物
计算机应用专业毕业生求职信
2013/10/24 职场文书
智能电子应届生求职信
2013/11/10 职场文书
大学生职业生涯规划书模板
2014/01/03 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
股东大会通知
2015/04/24 职场文书