<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. 两个有关Knockout自定义拓展方法fn的小技巧

    Adding custom functions using "fn" 让observable自增/自减 最简单的方法是self.num(self.num() + 1), 但是这个写 ...

  2. 字符串匹配的KMP算法(转)

    转载:http://kb.cnblogs.com/page/176818/ 字符串匹配是计算机的基本任务之一. 举例来说,有一个字符串"BBC ABCDAB ABCDABCDABDE&quo ...

  3. TC598 div2

    题意:给一些物品item[],这些物品的重量在101至300之间,要将这些物品全部放进若干个bins中,已知bins盛的重量为300,可以将bins装满也可以不装满, 问放这些物品最少需要几个bins ...

  4. \u202e

    document.write('\u202e1\u202e2\u202e3')

  5. Cocos2d-x 坑之一：Xcode文件真实目录与工程视图目录

    Cocos2d-x一定要保证 Xcode文件真实目录与工程视图目录 的一致性,不然,会出现文件读取不了,或include不了的情况. 如果出现此类情况,优先查看真实目录的结构.

  6. Android Weekly Notes Issue #238

    Android Weekly Issue #238 January 1st, 2017 Android Weekly Issue #238 本期内容包括: Firebase发送Notification ...

  7. HTTP 错误 404.3 - Forbidden

    在iis中能够浏览所有扩展名的文件时,IIS MIME的 映射 您只能在故障排除过程中将通配符映射添加到 IIS MIME 映射中,以作为一种临时解决方案.确定缺少 MIME 类型是问题的原因后,请删 ...

  8. linux命令 cp 递归复制 带权限复制

    cp -r 递归复制源目录下所有文件及子目录 到 目标目录或文件 cp -p 把源文件或目录下的所具有的权限一同复制 到 目标目录或文件

  9. Eclipse编译ijkplayer

    参考链接:http://blog.csdn.net/fatiao101/article/details/49586379

  10. 多IDC数据分布--MySQL多机房部署 - 学习笔记 - 51CTO技术博客

    多IDC数据分布--MySQL多机房部署 - 学习笔记 - 51CTO技术博客 多IDC数据分布--MySQL多机房部署