<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. IT传道解惑：心累了就读读

    写在开始 学习不是因为缺少时间而是缺少努力 Studies this matter, lacks the time, but is lacks diligently. 只要你想学好,用心去学,肯下功夫 ...

  2. 【HDOJ】2159 FATE

    DP+贪心优化. #include <stdio.h> #include <stdlib.h> #include <string.h> #define MAXNUM ...

  3. FFT小结

    先上模板 #include<cstdio> #include<cmath> <<)*+; typedef long long ll; ll power(ll t,; ...

  4. Automator 简单使用流程

    iOS开发中常常要用到图片缩放的工作,有些需求流程很奇葩,根本找不到现成的工具去实现. 这时候,你可以去想一想Automator了. 示例:要把文件夹下所有的图片文件都缩小成原来的一半(搞iOS开发的 ...

  5. 【Android 复习】 : Activity之间传递数据的几种方式

    在Android开发中,我们通常需要在不同的Activity之间传递数据,下面我们就来总结一下在Activity之间数据传递的几种方式. 1. 使用Intent来传递数据 Intent表示意图,很多时 ...

  6. 获得WCF Client端的本地端口 z

    当WCF调用远程服务时,显示该调用的网速或流量.其中比较关键的一步就是需要获得WCF  Client端的本地端口,原来以为是个简单的事情,结果查了1个多小时谷歌,硬是没找到好的法子,只有自己动手了. ...

  7. HDU-1241 Oil Deposits (DFS)

    Oil Deposits Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total ...

  8. SAS软件的使用和统计学分析的初步介绍

           一般而言我们都会使用Excel来统计测试结果,除了Excel之外,还有SAS等软件,也是可以统计测试结果的,本人也是SAS的初学者,现在我就给大家介绍一下SAS的简单使用,随着我不断的学 ...

  9. Centos环境下删除Oracle11g客户端文档

    将安装目录删除 [root@Oracle /root]# rm -rf /opt/oracle/ 将/usr/bin下的文件删除[root@Oracle /root]# rm /usr/local/b ...

  10. linux内核中经常用到的设备初始化宏

    内核使用了大量不同的宏来标记具有不同作用的函数和数据结构.如宏__init.__devinit等.这些宏在include/linux/init.h头文件中定义.编译器通过这些宏可以把代码优化放到合适的 ...