<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. Winform ObservableCollection 添加删除修改无效

    WPF中ObservableCollection 可以很好的使用. 在Winform中,之前使用ObservableCollection 做了几个功能,貌似增删改都可以. 今天写个Demo的时候发现不 ...

  2. QMap的使用

    1.定义 mapQMap<QString,QColor> map; 2.插入数据 map.insert("AA",RGB(255,0,0)); map.insert(& ...

  3. 利用canvas和RGraph作图

    利用canvas可以直接在页面中绘制各种复杂的图形,其中引用到一个Rgraph的插件. Rgraph插件使用非常方便,只需几步就可以完成一个折线图.饼图.柱状图,或是其中两者图形的结合! (1) 引用 ...

  4. Linux系统下Git操作命令整理

    1.显示当前的配置信息 git config --list 2. 创建repo从别的地方获取 git clone git://git.kernel.org/pub/scm/git/git.git 自己 ...

  5. 【bzoj1115】[POI2009]石子游戏Kam（博弈论）

    题目传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=1115 观察问题,我们能发现前后相邻两堆石子的数量差一定非负,而我们在第i堆石子中移走k ...

  6. LeetCode第[2]题(Java)：Add Two Numbers （链表相加）——Medium

    题目难度:Medium 题目: You are given two non-empty linked lists representing two non-negative integers. The ...

  7. yii2:doajax(post)会报500错误

    yii2:doajax(post)会报500错误:这是因为yii2开启了防御csrf的攻击机制,可去先去掉,在控制器里去掉:public $enableCsrfValidation = false , ...

  8. javascript 对象简单介绍（一）

    JavaScript 对象JavaScript 中的所有事物都是对象:字符串.数值.数组.函数...此外,JavaScript 允许自定义对象.所有事物都是对象JavaScript 提供多个内建对象, ...

  9. os.path.abs()与os.path.realpath()的一点区别

    相同点 1. 两者都是返回绝对路径,如果参数path为空,则返回当前文件所在目录的绝对路径 当前py文件所在的目录是revise print(os.path.abspath("") ...

  10. Chrome浏览器导入数字证书

    1.打开 chrome ,点击 右上角的选项图标,在下拉列表中找到 设置 . 2.在设置页面中,滚动到页面的最底部,找到,并点击显示高级设置,找到 HTTPS/SSL 这一项,点击 管理证书 按键.