直接上代码：

 <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. java DecimalFormat

    public class Test{ public static void main(String[] args) throws Exception{ /*DecimalFormat参数,如果是0则会 ...

  2. C#字符补位

    C#字符补位 .byte类型的字符,用5位2进制数表示,右对齐,不足5位,前面补零. byte b; Convert.ToString(b, ).PadLeft(, ') .byte类型的字符,用2位 ...

  3. Java实现一个字符串的反转

    Java小程序实现字符串的反转: 方法一: public class reverseString { public static void main(String[] args) { String s ...

  4. 自然语言处理2.1——NLTK文本语料库

    1.获取文本语料库 NLTK库中包含了大量的语料库,下面一一介绍几个: (1)古腾堡语料库:NLTK包含古腾堡项目电子文本档案的一小部分文本.该项目目前大约有36000本免费的电子图书. >&g ...

  5. SSRS入门相关笔记

    1.SSRS Server 的地址的查看及设置:打开 开始->程序-> Microsoft SQL Server 2012/2014 -> Configuration Tools - ...

  6. iproute-2.6.32

    iproute之tc命令翻译地址,man tc的翻译 http://blog.csdn.net/ysdaniel/article/details/7905879

  7. Swagger-UI 基于REST的API测试/文档类插件

    现在多数的项目开发中,网站和移动端都需要进行数据交互和对接,这少不了使用REST编写API接口这种场景.例如我目前的工作,移动端交由了另一团队开发,不同开发小组之间就需要以规范和文档作为标准和协作基础 ...

  8. 【转】PHP error_reporting() 错误控制函数功能详解

    定义和用法: error_reporting() 设置 PHP 的报错级别并返回当前级别.   函数语法: error_reporting(report_level)   如果参数 level 未指定 ...

  9. python之路 之open

    一.open:文件打开操作 文件句柄 = open('文件路径','读写模式') 打开文件的模式有: r:只读,默认(文件不存在则报错) w:只写(文件不存在则自动创建) a:追加(文件不存在则自动创 ...

  10. 获取在线人数 CNZZ 和 51.la

    string Cookies = string.Empty; /// <summary> /// 获取在线人数 (51.la统计器) /// </summary> /// &l ...