利用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 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、运行效果如下:

时间: 2024-10-06 02:40:45

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

在PHP当中制作隔行换色的效果以及制作上下翻页的效果!

首先说明隔行换色的效果,需要用到tr:nth_child(odd);或者括号里的值是even,odd是从第一行开始隔一行,even是从第二行开始: 具体代码如下图案所示: 1 <style> 2 /*tr:nth-child(even){*/ 3 /*background: #cad9ea;*/ 4 /*}*/ 5 </style> 在数据库当中查询第几条开始和我们需要显示的数据只要几条:我们可以用到limin语句,具体代码如下: 1 $sql = "select * f

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

利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期以及时间,至于钟表上的刻度.数字等元素,因为量比较多,采用jvascript生成 <!doctype html> <html> <head> <meta charset="UTF-8"> <link rel='stylesheet' h

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

<html> <head> <meta charset="utf-8"> <meta name="" content="content"> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/&g

js修改隔行tr的颜色。

<!DOCTYPE html><html lang="zh-Hans"><head> <meta charset="UTF-8"> <title>Title</title></head><body><table> <tr> <td>24</td> </tr> <tr> <td>24<

表格隔行换色

实现列表中隔行显示背景颜色 Html代码 <div class="searchListDetail"> <ul class="bold"> <li>姓名</li><li>公司</li><li>职位</li><li>标签</li><li>性别</li><li>工作年限</li> </ul>

cocos2dx-js html5网页版修改默认背景颜色

网上找了很多教程,资料很少,基本上也不能用,自己尝试着修改了很多地方,终于有用了 然后我退回了所有的修改,最终确定了可用的地方. 首先最重要的是cocos自身默认的背景色,修改frameworks\cocos2d-html5\CCBOOT.js,里,_initEvents函数里,最后一行添加一句 _initEvents: function () {        ... cc.eventManager.addCustomListener(cc.game.EVENT_HIDE, function

网页设计制作CSS实现隔行换色两种方法

网页设计制作CSS实现隔行换色两种方法 2007-12-21 20:59:44  来源:网页教学网 网页设计制作,CSS实现隔行换色两种方法: 第一种方法: 以下为引用的内容:<style type="text/css">UL.myul1 LI{}</style><ul class="myul1"><li id="li1">111</li><li id="li2"

初学JS——利用JS制作的别踩白块儿(街机模式) 小游戏

初学JS--利用JS制作的别踩白块儿(街机模式) 小游戏 这个是上个星期5写的了,当时是突然想写个游戏,就想到了别踩白块儿,当时的想法是 可能普通模式的别踩白块儿因为他的"块儿"是滚动的向上这种,以我目前会的技术想不出怎么写, 但是如果是街机模式,通过你每按一次按键之后他像下跳一格这样的就非常好实现了. 通过我目前会的知识,实现的步骤大概是这样的: 建一个4X4的表格,制作2张150X100的图片,一张全白色,一张全黑色,命名为0.JPG,1.JPG 就是说当文件名为0的时候就是白色的

《JS 隔行换色》

/*控制隔行换色的JS*/ $().ready(function(){ $("tr").each(function(i){ this.style.backgroundColor = ['#F8F8F8', '#F2F2F2'][i % 2] }); });