直接上代码：

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=gb3212">

         <title>单双行显示不同颜色</title>

         <script type="text/javascript">

             window.onload = function color(){

                 var table = document.getElementById("person");

                 var rows = table.getElementsByTagName("tr");

                 for(var i=0;i<rows.length;i++){

                     if (i%2==0){

                         rows[i].style.backgroundColor = "#EAF2D3"

                     }else{

                         rows[i].style.backgroundColor = "White";

                     }

                 }

             }

         </script>

         <style type = "text/css">

             #person

                 {

                     border-style:1px solid;

                     border-color:blue;

                     font-weight:bold;

                     font-family:楷体,Arial,Helvetica, sans-serif;

                     border-collapse:collapse;

                     margin:auto;

                 }

             #person th

                 {

                     border:1px solid;

                     padding:3px 7px 2px 7px

                     background-color:#A7C942

                     color:#ffffff

                     text-align:center;

                 }

             #person td

                 {

                     border-style:solid;

                     border-width:1px;

                     text-align:center;

                 }

         </style>

     </head>

     <body>

         <table id="person" align="center" width = "90%" height="200">

             <tr>

                 <th>姓名</th>

                 <th>性别</th>

                 <th>电话</th>

                 <th>爱好</th>

             </tr>

             <tr>

                 <td>zhangsan</td>

                 <td>male</td>

                 <td>123456</td>

                 <td>swimming</td>

             </tr>

             <tr>

                 <td>zhangsan</td>

                 <td>male</td>

                 <td>123456</td>

                 <td>swimming</td>

             </tr>

             <tr>

                 <td>zhangsan</td>

                 <td>male</td>

                 <td>123456</td>

                 <td>swimming</td>

             </tr>

         </table>

     </body>

 </html>

html table单双行颜色间隔（转载）的更多相关文章

  1. js改变,设置table单双行颜色,jquery改变,设置table单双行颜色

    1.js实现单双行以不同颜色显示 $(document).ready(function () { var color = "#ffeab3"; $("#GvList tr ...

  2. table 控制单双行颜色以及鼠标hover颜色 table光棒

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. repeater单双行颜色不同，gridview repeater DataList 鼠标经过改变背景颜色

    1.gridview 双击GridView的OnRowDataBound事件: 在后台的GridView1_RowDataBound()方法添加代码,最后代码如下所示: protected void  ...

  4. Js实现table单双行交替色

    依稀记得,当初我刚学编程的时候还学过怎么实现表格单双行交替色,现如今早已记不清当时的实现思路,这两天突然想起,没事就自己写了一小段代码,也不知道是否是当年的思路,不过不用纠结这个问题.:) 代码很简单 ...

  5. 奇偶选择器：使用odd和even属性实现表格单双行颜色相间和不同

    一.奇偶选择器 表格在呈现数据的时候我们为了方便观看,而隔行显示不同的颜色,虽然可以用用类选择器 class实现这种效果,但是未免太过麻烦,为了更加简便地表现这种特殊的效果我们需要用到一种特殊的选择器 ...

  6. js控制表格单双行颜色交替显示

    <script language="JavaScript"> window.onload = function() { var Table=document.getEl ...

  7. JS实战 · 表格行颜色间隔显示，并在鼠标指定行上高亮显示

    思路: 1.获取所有行对象,将需要间隔颜色显示的行对象进行动态的className属性指定:      前提是:先定义好类选择器,就是说给行对象赋予name. 2.高亮用到两个事件:onmouseov ...

  8. css单双行样式

    #random_box li:nth-child(odd) {//双行 background: #fff5c4; } #random_box li:nth-child(even) {//单行 back ...

  9. PB中datewindow单双行显示不同颜色

    调出datewindow,找到detail中的列,右击properties,左侧Background中的color属性添加 IF(MOD(GETROW(),2)=0,RGB( 255, 250, 20 ...

随机推荐

  1. hotspot

    http://openjdk.java.net/groups/hotspot/ Source code Bundles Download Mercurial respository (read-onl ...

  2. MMU讲解

    MMU是Memory Management Unit的缩写,中文名是内存管理单元,它是中央处理器(CPU)中用来管理虚拟存储器.物理存储器的控制线路,同时也负责虚拟地址映射为物理地址,以及提供硬件机制 ...

  3. Apache Shiro 手册

    (一)Shiro架构介绍 一.什么是Shiro Apache Shiro是一个强大易用的Java安全框架,提供了认证.授权.加密和会话管理等功能: 认证 - 用户身份识别,常被称为用户"登录 ...

  4. linux包之e2fsprogs之chattr命令

    概述 [root@localhost ~]# rpm -qf /usr/bin/chattre2fsprogs-1.41.12-18.el6.x86_64 chattr命令的作用很大,其中一些功能是由 ...

  5. 微信支付（0923更新）商户支付密钥key的生成与设置

    微信支付(0923更新)商户支付密钥key的生成与设置 说明:新版微信支付,用户必须授权登录才能支付.需要商家自己设置商户号支付密钥. 设置商户号支付密钥方法如下: 1. 申请通过审核后,打开微信发来 ...

  6. Android 文件的选择

    Android 文件的选择 打开文件选择器 private void showFileChooser() { Intent intent = new Intent(Intent.ACTION_GET_ ...

  7. java mail使用中遇到的550类型错误

    前言 首先,需要说明的是,本错误来自于一个简单的基于java mail的api程序,邮件服务器是163的SMTP,即smtp.163.com. 程序 需要说明一下,下面这个程序,是来自于网络上,本人为 ...

  8. github 添加 C# IGNORE

    在创建仓库时选择 VisualStudio 即可.

  9. IntelliJ IDEA中运行Tomcat报内存溢出（java.lang.OutOfMemoryError: PermGen space）

    在Run/Debug Configuration中修改Tomcat的VM options,在里面输入以下内容: -server -XX:PermSize=128M -XX:MaxPermSize=25 ...

  10. update openssl on redhat/centos

    $ openssl versionOpenSSL 1.0.1e-fips 11 Feb 2013 $ yum list |grep opensslopenssl.x86_64 1.0.1e-16.el ...