直接上代码：

 <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. bootstrap 固定底部导航自适应

    在使用bootstrap 底部导航的时候遇到了一个问题 -- 当我的内容超过一屏的时候,底部的部分内容会被固定的导航内容遮盖 自己写了一个JS脚本,解决自适应的问题 <nav class=&qu ...

  2. caffe 训练时，出现错误：Check failed: error == cudaSuccess (4 vs. 0) unspecified launch failure

    I0415 15:03:37.603461 27311 solver.cpp:42] Solver scaffolding done.I0415 15:03:37.603549 27311 solve ...

  3. 单例模式－ios

    #import <Foundation/Foundation.h> @interface UserContext : NSObject <NSCopying> @propert ...

  4. JQuery高性能最佳实践

    [使用最佳选择器] 使用JQuery时,你可以使用多种选择器,选择同一个元素,各种方法之间的性能是不一样的,有时候差异会特别大. 通常比较常用的选择器有以下几个: ID选择器 $("#id& ...

  5. ORA-12170: TNS: 连接超时

    ORA-12170: TNS: 连接超时 如果在本机可以正常使用,可是到局域网中的其他机器就出现“ORA-12170:TNS:连接超时 解决方法: 1.cmd-----ping ip地址 查看网络问题 ...

  6. 删除除了Src属性以后的全部属性

      public static string RemoveAllAttributesWithoutSrc(string input)      {                   string p ...

  7. 图片加载js类库

    Picturefill Picturefill.WP插件利用picturefill.js脚本展示Responsive图片,即根据视口宽度选择尺寸合适的图片加载,节省带宽,提高网站载入速度.例如用户用手 ...

  8. java 获取实体类对象属性值的方法

    在java中我们要获得实体类对象的属性,一般情况是将实体类中的属性私有化,然后再对外提供get()与set()方法,然后再获取实体类对象的属性的时候先把对象new出来,再用变量名.get()的方法得到 ...

  9. Struts2 - Interceptor中取得ActionName、Namespace、Method

    在Struts2的Interceptor中取得当前执行对应的ActionName.Namespace.Method方法: 可以使用: System.out.println(invocation.get ...

  10. JSP MVC

    Java的MVC玩起来比.Net的有意思,因为每一步你都知道它是如何运作的,都由自己去实现.而在.Net的MVC中,你却不知道一个Controller是如何对应到View中的,因为MS给了你IDE上的 ...