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. Java 的class文件关系

    一个java源文件javac出多个class文件出来!是怎么回事? 1. 你在一个文件里定义了几个类的时候,会出现这种情况,比如public class A {}class B {}class C { ...

  2. thinkphp中文验证码不能显示的问题

    使用tp框架里的验证码,数字验证码能很好的显示出来,下面是实现的函数 function verify(){ import("ORG.Util.Image"); return Ima ...

  3. WPF 一个数据库连接测试的实现

    要实现的功能效果图如下:因为我们要测试数据是从输入框获得的,所以,我们的连接字符串不是写死在应用程序中的.下面我就详细介绍一下.

  4. Html - 圆圈border

    很多场景下需要对元素加入圆圈.但光靠border-radius其实还要调很久,所以做一下笔记 #binggan .mui-icon { display: inline-block; margin: 3 ...

  5. [转]Efficiently Paging Through Large Amounts of Data

    本文转自:http://msdn.microsoft.com/en-us/library/bb445504.aspx Scott Mitchell April 2007 Summary: This i ...

  6. 数据库存储txt文本和jpg图片

    环境:MySql+SQLyog+j2se+jdbc 存储文本用longtext类型 存储图片用blob类型 1.首先建表 create table t_t (id int(16) NOT NULL A ...

  7. Excel中如何在两个工作表中查找重复数据

    有时我们可能会在两种工作表中查找重复记录,当数据记录很多时,就必须通过简单的方法来实现.下面小编就与大家一起分享一下查看重复记录数据的方法,希望对大家有所帮助. 方法/步骤   为了讲解的需要,小编特 ...

  8. linux消息队列的使用及内核实现原理

    mq_receive NAME mq_open - open a message queue SYNOPSIS #include <fcntl.h> /* For O_* constant ...

  9. CodeForces 621C 数学概率期望计算

    昨天训练赛的题..比划了好久才想出来什么意思 之前想的是暴力for循环求出来然后储存数组 后来又想了想 自己萌的可以.. 思路就是求出来每个人与他的右边的人在一起能拿钱的概率(V(或)的关系)然后*2 ...

  10. Android 调用资源字符串的几种方法

    在 Layout XML 调用字符串资源: <TextView android:layout_width="fill_parent" android:layout_heigh ...