直接上代码：

 <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. js类型判断

    console.log('---------------------'); var a="string"; console.log(a); //string var a=1; co ...

  2. javascript jquery 常用方法

    javascript splice()   //删除数组成员 pop()   //删除数组成员 jquery $.type(aaa)  //判断对象类型

  3. sql防注入的简单实现,防XSS的简单实现

    1.sql-替换'(切断字符串)符和\(转义字符)符为空, 2.xss-替换<(标签开始符)符 但用这种简单方法在sql和html中不能再使用这些字符了.

  4. SQL Server 表所在的文件组

    SELECT  o.[name] ,-- o.[type], i.[name], i.[index_id],         f.[name] FROM    sys.indexes i        ...

  5. 用NativeScript创建JavaScript原生移动应用

    Telerik公开了用于创建安卓.iOS和Windows Universal跨平台原生应用的框架,NativeScript的公共访问权限. NativeScript既不是一种新型的JavaScript ...

  6. JavaScript兼容性问题

    Firefox浏览器不支持js的innerText属性:

  7. 编写使用SpringSecurity的JUnit测试提醒

    近日在使用SpringSecurity的项目中发现一个小问题,就是在接口上加了@Secured标注限制调用接口权限时,某些JUnit无法正常调用了. 例如: @Secured(PrivilegeDAO ...

  8. Kafka 安装和测试

    转载自:http://czj4451.iteye.com/blog/2041096 1. 简介 kafka (官网地址:http://kafka.apache.org)是一款分布式消息发布和订阅的系统 ...

  9. SQL Server 2008维护计划 出错 无法实现自动备份

    ,MaintenancePlan.Subplan_1,错误,0,HBZGQ\TESTSQLSERVER,MaintenancePlan.Subplan_1,(作业结果),,该作业失败. 用户 sa 调 ...

  10. 股票自用指标 boll 菜刀

    BI:=(H+L+O+C)/; BOL:EMA(BI,N); UPPER:BOLL+N1*STD(CLOSE,N); LOWER:BOLL-N1*STD(CLOSE,N); MA1:MA(CLOSE, ...