<script type="text/javascript">  

    window.onload=function(){     

       var oUl=document.getElementById('ul1');     

       var aLi=oUl.getElementsByTagName('li');      

       for(var i=0; i< aLi .length; i++)  {       

           if(i%2==0)  //取模 求余数          

        {   

            aLi[i].style.background='red';  

          

        }    

        }  

    }  

    </script>  

    <ul id="ul1">  

      <li>webtall</li>  

      <li>webtall</li>  

      <li>webtall</li>  

      <li>webtall</li>  

      <li>webtall</li>  

</ul>

<head runat="server">

    <title></title>

    <script type="text/javascript">

        window.onload = function () {

            var otab = document.getElementById('tab1');

            var thiscolor = '';

            for (var i = 0; i < otab.tBodies[0].rows.length; i++) {

                otab.tBodies[0].rows[i].onmouseover = function () {

                    thiscolor = this.style.background;

                    this.style.background = '#00FFFF';

                };

                otab.tBodies[0].rows[i].onmouseout = function () {

                    this.style.background = thiscolor;

                };

                if (i % 2) {

                    otab.tBodies[0].rows[i].style.background = '';

                }

                else {

                    otab.tBodies[0].rows[i].style.background = '#FFFF00';

                }

            }

        };

    </script>

JS 隔行变色的更多相关文章

  1. js隔行变色

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 简单的css js控制table隔行变色

    (1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...

  3. [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件

    隔行变色功能,不用js,直接用css伪类就可以做,这个实例可以作为js插件开发很好的入门级实例.本文实现的隔行变色包括以下功能: 1,支持2种常用结构共存( div元素 和 表格类型 ) 2,一个页面 ...

  4. 隔行变色---简单的css js控制table隔行变色

    (1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...

  5. 使用webpack打包js文件(隔行变色案例)

    使用webpack打包js文件(隔行变色案例) 1.webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令 在项目根目录中运行 ...

  6. HTML系列：js和css多种方式实现隔行变色

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. JS实现表格隔行变色

    用到的鼠标事件:(1)鼠标经过 onmouseover:(2)鼠标离开 onmouseout 核心思路:鼠标经过 tr 行的时候,当前行会改变背景颜色,鼠标离开的时候去掉背景颜色. 注意:第一行(th ...

  8. JS实现隔行变色，鼠标移入高亮

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...

  9. 表格的一些原生js操作（隔行变色，高亮显示，添加删除，搜索）

    看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...

随机推荐

  1. ORM实例介绍

    http://blog.csdn.net/RonoTian/article/details/2900714

  2. 毕业一年后的java面试总结

    前言  目前公司闲,没有新产品开发,都是一些维护工作,于是我提出了离职,开始了面试之路,抱着一个面试就是学习的心态去面试的,当然了,也是希望能拿到大公司的offer,大概面试了一个月左右的时间!!! ...

  3. 【c++习题】【17/5/8】重载运算符

    1.设计一个Complex(复数)类,完成如下要求: 该类具有实部(Real_Part)和虚部(Image_Part)通过重载运算符“+”实现两个复数的相加通过重载运算符“+”实现一个复数与一个数值的 ...

  4. Python面试题之集合推导式、字典推导式

    集合推导式 集合推导式(set comprehensions)跟列表推导式也是类似的, 唯一的区别在于它们使用大括号{}表示. Code: sets = {x for x in range(10)} ...

  5. C++类中成员变量的初始化总结

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  6. Win32 API编程：网络编程在设置WSAAsyncSelect模型后connect的返回值问题

    通过WSAAsyncSelect()可以设置非阻塞异步套接字 ::WSAAsyncSelect(s, hDlg, WM_SOCKET, FD_CONNECT | FD_CLOSE | FD_WRITE ...

  7. 定制kali linux

    Kali Linux Ps: Kali发布撸~ 写了个如此装13的标题.这是一个Guide… 都是些基本操作撸.定制为王实推 ArchLinux.  各位看官继续………………………………………号外.L ...

  8. Python 函数定义和使用

    # 函数的概念 # 概念 # 写了一段代码实现了某个小功能; 然后把这些代码集中到一块, 起一个名字; 下一次就可以根据这个名字再次使用这个代码块, 这就是函数 # 作用 # 方便代码的重用 # 分解 ...

  9. HDU 1337 && POJ 1218&& zju 1350 方法总结

    题目链接http://acm.hdu.edu.cn/showproblem.php?pid=1337 杭电 http://poj.org/problem?id=1218清华 http://acm.zj ...

  10. LeetCode——Max Consecutive Ones

    LeetCode--Max Consecutive Ones Question Given a binary array, find the maximum number of consecutive ...