<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style type="text/css">

    li {

        list-style-type: none;

        width: 300px;

        height: 30px;

    }

</style>

</head>

<body>

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

<script type="text/javascript">

    var oli=document.getElementsByTagName('li');

    for(var i=0;i<oli.length;i++) //i++后面不要加分号

        {

            if(i%2==0)

                {

                    oli[i].style.background='#F17B7D';

                }

            else

                {

                    oli[i].style.background='#EDB461';

                }

        }

</script>

</body>

</html>

查看原文

利用JavaScript的%做隔行换色的更多相关文章

  1. 利用JS动态生成隔行换色HTML表格

    用JS生成动态生成表格,行.列由用户输入,并使表格隔行换色 方法一. 代码: <!DOCTYPE html> 2 <html> 3 <head> 4 <tit ...

  2. javascript 表格隔行换色

    用到的知识点: 获取表格元素 tbody 和 rows都是有索引的 这里我们只有一组tbody所以 索引是0 偶数行 索引取余2为0 奇数行 索引取余2不为0 通过 遍历行索引设置相应的颜色. < ...

  3. JavaScript学习——表格的隔行换色+高亮显示

    1.案例一:我们希望在后台页面中实现一个隔行换色的效果显示所有的用户信息,显示效果如下: 1)新标签 <thead> //表头 <tr> <th></th&g ...

  4. JQuery的使用案例（二级联动，隔行换色，轮播图，广告插入）

    JQuery的使用案例 (一)利用JQuery完成省市二级联动 第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份 第二步:创建二维数组来存储省份和城市 第三步:遍历二维数组中的 ...

  5. table隔行换色

    以前做表格隔行换色,是在tr上添加不同的背景色,但在程序开发的过程需要做判断,不够方便,而且生成的代码也比较多,现在的需求逐渐修改为JQ去控制简洁的表格去显示隔行换色 <script type= ...

  6. jQuery应用实例2：表格隔行换色

    这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...

  7. jQuery_完成表格的隔行换色

    表格的颜色一样不利于区分,而利用jQuery则可以很方便的进行表格的隔行换色操作,原表如下: 这样看着很不方便,但是隔行换色之后非常便捷清楚. 代码如下: <!DOCTYPE html> ...

  8. table 表格隔行换色实现

    table 表格隔行换色实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  9. 【angularjs】使用angular搭建项目，实现隔行换色

    描叙:使用ng-class实现每隔3行换色 代码: <!DOCTYPE html> <html ng-app="myApp"> <head> & ...

随机推荐

  1. 【转载】CentOS 安装rz和sz命令 lrzsz

    lrzsz在linux里可代替ftp上传和下载.lrzsz 官网入口:http://freecode.com/projects/lrzsz/ lrzsz是一个unix通信套件提供的X,Y,和ZMode ...

  2. 玩转python 各种数据类型的转换

    # -*- coding: utf-8 -*- # @Time : 2019/4/28 14:27 # @Author : wujf # @Email : 1028540310@qq.com # @F ...

  3. mac上如何设置ssh不断掉，并且session保持

    ➜ ~ pwd /Users/muahao ➜ ~ cat ~/.ssh/config Host * ServerAliveInterval 60 ControlMaster auto Control ...

  4. 函数（day08）

    C语言里可以采用分组的方式管理语句 每个语句分组叫做一个函数 多函数程序执行的时候时间分配情况必须 遵守以下规则 .整个程序的执行时间被划分成几段,每段 时间都被分配给一个函数使用 .不同时间段不能互 ...

  5. 9day条件语句和基本数据类型

    1基本数据类型: 字符串‘’," ",''' ''' 单引号,双引号,三引号 加法: n1='ruser' n2='sb' n3=n1+n2 print(n3) 乘法: n1='r ...

  6. laravel-hprose(rpc框架)

    Laravel-hprose 基于 hprose/hprose-php 开发的Laravel扩展:laravel-hprose 版本要求 Laravel>=5.2 安装 composer req ...

  7. code vs 3305 水果姐逛水果街Ⅱ

    3305 水果姐逛水果街Ⅱ  时间限制: 2 s  空间限制: 256000 KB  题目等级 : 钻石 Diamond 题解       题目描述 Description 水果姐第二天心情也很不错, ...

  8. POJ 3130

    这题,加了精度错了,不加精度反而对了... #include <iostream> #include <cstdio> #include <cstring> #in ...

  9. 当前插入的线段能完整覆盖存在的几条线段 树状数组 HDU 5372 Segment Game

    http://acm.hdu.edu.cn/showproblem.php? pid=5372 Segment Game Time Limit: 3000/1500 MS (Java/Others)  ...

  10. Java高级程序猿技术积累

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveDczNDQwMDE0Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...