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、运行效果如下：

利用HTML和JS制作隔行换背景颜色的表格的更多相关文章

  1. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  2. jquery点击tr换背景颜色

    jquery点击tr换tr的背景颜色,table的id为db-list1jQuery(function() { jQuery("#db-list1 tr").click( func ...

  3. js之隔行换色

    HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  4. css和js处理隔行换色的问题

      <html> <head> <meta charset="utf-8"> <meta name="" conten ...

  5. EasyUI中DataGrid隔行改变背景颜色。

    <table id="dg" class="easyui-datagrid" style="width: 1000px; height: 300 ...

  6. OpenCV实现彩色图像轮廓 换背景颜色

    转摘请注明:https://i.cnblogs.com/EditPosts.aspx?opt=1 有时候我们需要不一样颜色的证件照,下面就用OpenCV来实现证件照的蓝底.红底等换颜色: 代码如下: ...

  7. js和jquery修改背景颜色的区别

    html: <HTML> <head> <meta http-equiv="content-type" content="text/html ...

  8. js修改隔行tr的颜色。

    <!DOCTYPE html><html lang="zh-Hans"><head> <meta charset="UTF-8& ...

  9. JS练习：定时器--背景颜色交替变换

    代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UT ...

随机推荐

  1. BST & Treap

    二叉查找树递归定义: 二叉查找树是空树或不是空树二叉查找树的左二叉查找树的值一定小于二叉查找树的值或左二叉查找树为空树二叉查找树的右二叉查找树的值一定大于二叉查找树的值或右二叉查找树为空树 不维护父亲 ...

  2. 关于TbSchedule任务调度管理框架的整合部署

    一.前言 任务调度管理作为基础架构通常会出现于我们的业务系统中,目的是让各种任务能够按计划有序执行.比如定时给用户发送邮件.将数据表中的数据同步到另一个数据表都是一个任务,这些相对耗时的操作通过任务调 ...

  3. JavaScript_解决safari浏览器window.open无法实现的问题

    解决 safari window.open 无法实现的问题 先说下问题是什么吧: safari 中没办法在回调函数里面执行window.open, 原因是safari的安全机制将其阻挡了(具体的原因可 ...

  4. winform学习2-datagridview数据绑定

    1.datagridview.clearSelection()清除默认的选中项 2.列数据显示,首先列必须是显示状态, 3.布局-单元格内文字内容居中显示,示例:外观-defaultCellStyle ...

  5. [转]ASP.NET会话（Session）保存模式

    本文转自:http://blog.csdn.net/cityhunter172/article/details/727743 作者:寒羽枫(cityhunter172) 大家好,已有四个多月没写东东啦 ...

  6. 《GK101任意波发生器》升级固件发布（版本：1.0.2build955）

    一.固件说明: 硬件版本:0,logic.3 固件版本:1.0.2.build955 编译日期:2015-12-14 ====================================== 二. ...

  7. 小组项目alpha发布的评价

    新蜂团队一直都特别努力,这节课我也看到了他们努力的结果--项目可以顺利运行,在两个同学试玩期间没有出现BUG,不知道玩游戏的同学的心情,反正我们在台下看得很开心的. 飞天小女警组的礼物挑选系统,是一个 ...

  8. Bootstrap兼容

    转:http://blog.csdn.net/chenhongwu666/article/details/41513901 如有雷同,不胜荣幸,若转载,请注明让IE6 IE7 IE8 IE9 IE10 ...

  9. Frenetic Python实验(三)

    实验5 repeater 这个实验在HelloSDNWorld里面做的实验是一样的.HelloSDNWorld 目的:模拟一个有多个端口的中继器. This application implement ...

  10. Javascript 笔记与总结（2-9）获取运行时的 style 对象

    获取内存中(正在渲染)的 style 的值(非内联 style,obj.style 只能获得内联 style 的值),可以用 obj.currentStyle(低版本 IE 和 Opera 支持)和 ...