<html>

   <head>

       <script type="text/javascript">

         /**

             最近因项目的需求，有这样的一个问题：

                 一个table显示n条记录，每3行换一次颜色，例如：1，2，3行红色背景，4，5，6行绿色背景，7，8，9行红色背景...以此类推！

         */

         window.onload=function() {

                var tbl = document.getElementById("table"); // 先获取table

                var rows = tbl.getElementsByTagName("tr"); // 获取里面的行tr

                for(i=0;i<rows.length;i++) {  // 遍历里面的行

                       var j = parseInt(i/3); // 以每3行为单位,j为：3次0，3次1，3次2 ...

                       if(j%2==0){ // 再通过取模来设置每隔3行显示不同的两种颜色

                         rows[i].style.backgroundColor="#f00";

                       }else{

                         rows[i].style.backgroundColor="#0f0";

                       }

                }

         };

       </script>

   </head>

   <body>

     <table id="table" border="1" width="500px">

        <tr><td>1</td></tr>

        <tr><td>2</td></tr>

        <tr><td>3</td></tr>

        <tr><td>4</td></tr>

        <tr><td>5</td></tr>

        <tr><td>6</td></tr>

        <tr><td>7</td></tr>

        <tr><td>8</td></tr>

        <tr><td>9</td></tr>

        <tr><td>10</td></tr>

        <tr><td>11</td></tr>

        <tr><td>12</td></tr>

        <tr><td>13</td></tr>

        <tr><td>14</td></tr>

        <tr><td>15</td></tr>

        <tr><td>16</td></tr>

        <tr><td>17</td></tr>

        <tr><td>18</td></tr>

     </table>

   </body>

 </html>

上面代码最终的效果为：

Html+Css+Js_之table每隔3行显示不同的两种颜色的更多相关文章

  1. CSS多行文字垂直居中的两种方法

    之前写过一篇关于:CSS左右居中对齐的文章,里面提到的两种方法其实也可以引申为垂直居中对齐.写这篇文章是因为要兼容IE6.IE7的问题,我们都知道一行文字时可以通过line-height来设置垂直居中 ...

  2. CSS和JS两种颜色渐变文字效果代码

    js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...

  3. jquery <li>标签 隔若干行 加空白或者加虚线

    $(function () { $('ul li').addClass(function (i) { return i % 6 == 5 ? "ab" : "" ...

  4. CSS渐变的两种基本用法

    1.线性渐变(linear-gradient) 基础用法:background:linear-gradient(angle,start-color,soft-line,end-color); 依次解释 ...

  5. css划隔横线的两种方法

    css划隔横线的两种方法  方法一:用DIV,代码如下:(推荐此方法)    <div style="width:800px;height:1px;margin:0px auto;pa ...

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

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

  7. table完美css样式，table的基本样式，table样式

    table完美css样式,table的基本样式,table样式 >>>>>>>>>>>>>>>>> ...

  8. 基于CSS属性display:table的表格布局的使用

    项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格 ...

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

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

随机推荐

  1. java学习多线程之死锁

    形成死锁的前提是同步代码块嵌套. 什么是死锁?当一个线程拿到锁以后在这个锁内部的代码需要访问另一段的代码的时候另外一个程序的锁被另外一个线程拿到,这样的话,就造成了两个锁互不想让程序没法往下执行的这种 ...

  2. CSS六大选择器（注释css表里不能加注释！！）

    @charset "utf-8"; /* CSS Document */ <!--标签控制器--> body{ background-color:#F00} <! ...

  3. Codevs_1017_乘积最大_(划分型动态规划/记忆化搜索)

    描述 http://codevs.cn/problem/1017/ 给出一个n位数,在数字中间添加k个乘号,使得最终的乘积最大. 1017 乘积最大 2000年NOIP全国联赛普及组NOIP全国联赛提 ...

  4. constant

  5. 【转】Android4.4（MT8685）源码蓝牙解析--BLE搜索

    原文网址:http://blog.csdn.net/u013467735/article/details/41962075 BLE:全称为Bluetooth Low Energy.蓝牙规范4.0最重要 ...

  6. 彻底卸载oracle10g

    如果Oracle安装在Windows上,那么删除起来特别麻烦,以下列出具体步骤: 软件环境: Windows 7.ORACLE 10.1.24:ORACLE安装路径为:C:/ORACLE 实现方法: ...

  7. Authorized users only. All activity may be monitored and reported.

    Authorized users only. All activity may be monitored and reported. Directory: /home/oracle 如出现如上问题,是 ...

  8. js 打印网页指定内容

    function doPrint() { setTimeout(function() { bdhtml=window.document.body.innerHTML; sprnstr="&l ...

  9. Bzoj 1853: [Scoi2010]幸运数字 容斥原理,深搜

    1853: [Scoi2010]幸运数字 Time Limit: 2 Sec  Memory Limit: 64 MBSubmit: 1774  Solved: 644[Submit][Status] ...

  10. Bzoj 3343: 教主的魔法 分块,二分

    3343: 教主的魔法 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 821  Solved: 364[Submit][Status][Discuss ...