zoukankan      html  css  js  c++  java
  • 利用HTML和JS制作隔行换背景颜色的表格

    1、源代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>黄石港区民主党派成员登记表</title>
    <script type="text/javascript">
     function xlh(){
      var tbl = document.getElementById("tbl");
      var rows = tbl.rows.length;
      for(var i=0;i<rows;i++){
       if(i%2 == 0){
          tbl.rows[i].style.backgroundColor = "#cccccc";
       }
     }
    }
    </script>
    </head>
    
    <body onload="xlh()" bgcolor=antiquewhite>
     <h1 align="center">黄石港区民主党派成员登记表</h1>
        <table id="tbl" cellpadding="10" cellspacing="0" border="1" align="center">
         <tr>
             <td>党派名称</td>
                <td>姓名</td>
                <td>性别</td>
                <td>出生年月</td>
                <td>籍贯</td>
                <td>名族</td>
                <td>加入党派时间</td>
                <td>文化程度</td>
                <td>所在工作单位及职务</td>
                <td>社会职务</td>
                <td>联系电话</td>
                <td>所属社区</td>
                <td>所属网络</td>
                <td>操作</td>
            </tr>
    
    <tr>
             <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td><a href="#">修改</a> <a href="#">删除</a></td>
            </tr>
            <tr>
             <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td><a href="#">修改</a> <a href="#">删除</a></td>
            </tr><tr>
             <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td><a href="#">修改</a> <a href="#">删除</a></td>
            </tr>
        </table>
    </body>
    </html>

    2、运行效果如下:

  • 相关阅读:
    数据库知识整理<二>
    数据库知识整理<一>
    面试经历感悟:
    JDK,J2EE,J2SE,J2ME的概念区别是什么呢?
    HTML与JSP页面的区别
    Java并发编程:深入剖析ThreadLocal
    剖析错误原理并解决Hibernate出现No TransactionManagerLookup specified!错误
    MyEclipse中jar包管理技巧
    String,StringBuffer与StringBuilder的区别??
    POJO / JavaBean / Entity Bean
  • 原文地址:https://www.cnblogs.com/jasmine-95/p/4969174.html
Copyright © 2011-2022 走看看