<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. Redhat 安装Oracle DBI和DBD

    Redhat 安装DBI和ORACLE DBD tar -zxvf DBI-1.616.tar.gz cd DBI-1.616 perl Makefile.PL make make install 2 ...

  2. Android 性能优化 四 布局优化merge标签的使用

    小白:之前分享了ViewStub标签的使用,Android还有其他优化布局的方式吗? 小黑:<merge />标签用于减少View树的层次来优化Android的布局.先来用个例子演示一下: ...

  3. 【log4js】

    手动创建日志目录 定时清理 nodejs之日志管理 玩转Nodejs日志管理log4js access.log-2015-11-20

  4. 老的acm & oj学习站点

    1.网易小鱼博客 http://gisyhy.blog.163.com/blog/#m=0&t=1&c=fks_087069086082087064085081082095085084 ...

  5. jBPM 4.4 数据库设计

    1         存储流程定义相关的部署信息数据库 1.1              jbpm4_deployment 字段名 字段含义 类型 允许空值 键 DBID_ 流程模板标识 Bigint( ...

  6. 开发神器之--Sublime Text

    原来还有这么个神器啊,忍痛丢掉了notepad++,投入她的怀抱!! 使用和介绍就不写了,大牛们已经整理了. 官网:http://www.sublimetext.com/ 入门及心得:http://w ...

  7. OGRE插件设计-Texture与GLTexture

    背景: 学习OGRE,在OGRE中 Core是最小的精简逻辑集合,而真正的功能则需要插件来实现,但是作为插件应该与Core保持最小的连接,同时Core不会调用插件的接口,而动态链接库又不能直接把类连接 ...

  8. OSI 七层模型和 TCP/IP 协议比较

      OSI (Open System Interconnection), 开放式系统互联参考模型.从下到上七层模型功能及其代表协议: 物理层(Physical) :规定了激活.维持.关闭通信端点之间的 ...

  9. hdoj 1789 Doing Homework again

    Doing Homework again Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  10. oracle Imp和exp以及导入常见的错误

    一 1) 数据库对象已经存在 一般情况, 导入数据前应该彻底删除目标数据下的表, 序列, 函数/过程,触发器等; 数据库对象已经存在, 按缺省的imp参数, 则会导入失败 如果用了参数ignore=y ...