<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. vs2015 Xamarin.Android安装

    原文:vs2015 Xamarin.Android安装 Xamarin.Android 安装步骤,以vs2015为例 1,安装vs2015中的跨平台项,但是安装在国内肯定失败,因为需要到谷歌下载 当我 ...

  2. SFTP文件上传与下载

    SFTP是对ftp进行加密的一种文件协议. 首先是先引入:jsch-0.1.42-sources.jar与jsch-0.1.42.jar包 SFTP文件上传与下载. import java.io.Fi ...

  3. hadoop2.2编程：DFS API 操作

    1. Reading data from a hadoop URL 说明:想要让java从hadoop的dfs里读取数据,则java 必须能够识别hadoop hdfs URL schema, 因此我 ...

  4. 【转】Android开发之旅：环境搭建及HelloWorld

    原文网址: http://www.cnblogs.com/skynet/archive/2010/04/12/1709892.html 引言 本系列适合0基础的人员,因为我就是从0开始的,此系列记录我 ...

  5. 如何设置SVN提交时强制添加注释

    windows版本: 1.新建一个名为pre-commit.bat的文件并将该文件放在创建的库文件的hooks文件夹中 2.pre-commit.bat文件的内容如下: @echo off set S ...

  6. javascript在alert()出现中文乱码

    今天在写jquery代码时,alert()总是出现中文乱码 琢磨了好一会儿,在网上查的资料是html页面上设置charset为GB2312 <meta charset="GB2312& ...

  7. UIButton set touch handler in code

    One option is to set the button up using [myButton addTarget:yourOtherClass action:@selector(mySelec ...

  8. 软件授权协议有什么作用，例如GPL、Apache License、CDDL、EPL这些协议有什么区别？

    1.授权协议有什么作用:授权协议就是授予你使用或修改软件等权利,由于软件受到著作权保护,未经授权使用即是侵犯著作权,属于违法行为,所以同意或签署软件授权协议是你使用或修改软件的前提条件.既然是授权协议 ...

  9. hdoj 1083 Courses【匈牙利算法】

    Courses Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total S ...

  10. UILabel字体加粗等属性和特效

    /* Accessing the Text Attributes text  property font  property textColor  property textAlignment  pr ...