直接上代码：

 <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. centos 编译swoole

    /usr/include/php/ext/pcre/php_pcre.h:45: error: expected '=', ',', ';', 'asm' or '__attribute__' bef ...

  2. MFC如何添加自定义控件

    project->add to project->components and controls在Registered ActiveX Controls下找到你注册的自定义控件就可以了   ...

  3. line-hieght与vertical-align的区别与联系

    7.3 line-height 行高指的是文本行的基线间的距离,但是文本之间的空白距离不仅仅是行高决定的, 同时也受字号的影响. 7.3.1 语 法 line-height属性的具体定义列表如下: 语 ...

  4. QQ登入（3）QQ空间分享-无需登入

    public void myclick2(View v){ //QZone分享, SHARE_TO_QQ_TYPE_DEFAULT 图文,SHARE_TO_QQ_TYPE_IMAGE 纯图 ,SHAR ...

  5. 阿里云安装nginx 和 php-fpm

    yum install yum-priorities -y rpm -Uvh http://download.fedora.redhat.com/pub/epel/5/i386/epel-releas ...

  6. 一个不错的vim配置

    set nocp set backspace=indent,eol,start set number set autoindent set nocompatible set bs=indent,eol ...

  7. Python 统计IIS日志行数

    __author__ = 'Administrator' import codecs def blocks(file, size=65536): while True: b = file.read(s ...

  8. window.showModalDialog两次加载问题清除缓存方法

    问题: window.showModalDialog两次加载问题:你第一次打开窗口后,第二次浏览器没有从服务器端取数据,而直接找到了你已经下载的文件,也就是不再走后台的Action方法(即使数据已经更 ...

  9. 【性能诊断】十、性能问题综合分析（案例1，windbg、Network Monitor）

    [问题描述]:       产品中某业务功能A,在进行"刷新"->选择制单->新增->切换其他行等一系列操作后,突然发生客户端不响应的现象.       经反复测 ...

  10. ASP.NET MVC3升级到ASP.NET MVC4 的方法

    ASP.NET MVC3升级 ASP.NET MVC4 的方法: 1.先去掉引用的System.Web.Mvc.dll(MVC3版本),重新引入System.Web.Mvc.dll(MVC4版本) 2 ...