<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function() {
//获取表
var tb = document.getElementById("tableId");
//根据表获取表里的所有行，返回的是数组
var row1 = tb.getElementsByTagName("tr");
for (var i = 0; i < row1.length; i++) {
//var num = row1[i];
if (i % 2 == 0) {
row1[i].style.backgroundColor = "darkgray";
} else {
row1[i].style.backgroundColor = "dimgray";
}
}
}
</script>
</head>

<body>
<table width="600px" align="center" border="1px" id="tableId">
<tr>
<td align="center">
<font color="#996633" size="5">用户注册</font>
</td>
</tr>
<tr>
<td align="right">用户名</td>
<td><input type="text" name="userName" /></td>
</tr>
<tr>
<td align="right">密码</td>
<td><input type="password" name="userPassword" /></td>
</tr>
<tr>
<td align="right">确认密码</td>
<td><input type="password" name="rePassword" /></td>
</tr>
<tr>
<td align="right">性别</td>
<td><input type="radio" name="girl" checked="checked" value="女" />女
<input type="radio" name="girl" checked="checked" value="女" />男
</td>
</tr>
<tr>
<td align="right">出生日期</td>
<td align="left">
<input type="text" />
</td>
</tr>
<tr>
<td width="50%"></td>
<td align="left"><input type="submit" align="center" value="提交" /></td>
</tr>
</table>
</body>
</html>

JavaScript实现隔行换颜色的更多相关文章

  1. javascript 表格隔行换色

    用到的知识点: 获取表格元素 tbody 和 rows都是有索引的 这里我们只有一组tbody所以 索引是0 偶数行 索引取余2为0 奇数行 索引取余2不为0 通过 遍历行索引设置相应的颜色. < ...

  2. table隔行换色

    以前做表格隔行换色,是在tr上添加不同的背景色,但在程序开发的过程需要做判断,不够方便,而且生成的代码也比较多,现在的需求逐渐修改为JQ去控制简洁的表格去显示隔行换色 <script type= ...

  3. JavaScript学习——表格的隔行换色+高亮显示

    1.案例一:我们希望在后台页面中实现一个隔行换色的效果显示所有的用户信息,显示效果如下: 1)新标签 <thead> //表头 <tr> <th></th&g ...

  4. jQuery学习(四)——使用JQ完成表格隔行换色

    1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...

  5. JQuery的使用案例（二级联动，隔行换色，轮播图，广告插入）

    JQuery的使用案例 (一)利用JQuery完成省市二级联动 第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份 第二步:创建二维数组来存储省份和城市 第三步:遍历二维数组中的 ...

  6. jQuery_完成表格的隔行换色

    表格的颜色一样不利于区分,而利用jQuery则可以很方便的进行表格的隔行换色操作,原表如下: 这样看着很不方便,但是隔行换色之后非常便捷清楚. 代码如下: <!DOCTYPE html> ...

  7. 原生js实现音乐列表（隔行换色、全选）

    一.实现原理: 1.使用 % 运算符实现各行换色,规律:当%前面的值和后面的值相同时  结果为0: 2.使用开关思想,实现在同一个元素上反复点击时的条件判断,并且把开关以属性方式绑定在每个元素上: 3 ...

  8. table 表格隔行换色实现

    table 表格隔行换色实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  9. c#dev gridview 设置隔行换色等

    1:禁止gridview编辑 2:隔行换色 介绍一些常用的gridcontrol设置. 1.设置隔行变色.首先设置显示隔行变色,步骤:OptionsView-->EnableAppearance ...

随机推荐

  1. Mac下安装 MongoDB

    Mac 下安装 MongoDB 一般有两种方法,一种是通过源码安装,一种是直接使用 homebrew ,个人推荐使用 homebrew ,简单粗暴. 1.安装 homebrew : /usr/bin/ ...

  2. 7.spark共享变量

    spark共享变量 1 Why Apache Spark 2 关于Apache Spark 3 如何安装Apache Spark 4 Apache Spark的工作原理 5 spark弹性分布式数据集 ...

  3. [dubbo实战] dubbo+zookeeper伪集群搭建

    zookeeper作为注册中心,服务器和客户端都要访问,如果有大量的并发,肯定会有等待.所以可以通过zookeeper集群解决. 一.为什么需要zookeeper呢? 大部分分布式应用需要一个主控.协 ...

  4. Java Collection（转载）

    在 Java2中,有一套设计优良的接口和类组成了Java集合框架Collection,使程序员操作成批的数据或对象元素极为方便.这些接口和类有很多对 抽象数据类型操作的API,而这是我们常用的且在数据 ...

  5. 菜鸟的 Sass 学习笔记

    介绍 sass 是什么?? 在sass的官网,它是这么形容给自己的 Sass is the most mature, stable, and powerful professional grade C ...

  6. [Scoi2014]方伯伯的玉米田 二维树状数组+动态规划

    考试最后半个小时才做这道题.十分钟写了个暴力还写挂了..最后默默输出n.菜鸡一只. 这道题比较好看出来是动规.首先我们要明确一点.因为能拔高长度任意的一段区域,所以如果从i开始拔高,那么一直拔高到n比 ...

  7. GitLab Development Kit 环境搭建

    在公司内网服务器上面搭建gdk环境,踩了很多坑,历时四五天(中间涉及申请开通固定外网),整理如下: 总览: 操作系统:redhat 6.3 参考文档:https://gitlab.com/gitlab ...

  8. python 深浅拷贝

    先定义一个列表 >>> s = [1,'alex','alvin'] >>> s2 = s.copy() 使用copy()方法拷贝,创建一个新的对象s2 >& ...

  9. 记一次小型生产事故 | BeyondComper跨编码方式复制文件内容

    前言 今天组长在做站内巡检的时候,发现header内有一条meta标签的content显示为乱码. <meta name="description" content=&quo ...

  10. 一步一步学多线程-Timer

    在执行定时任务的时候可以用Timer来实现,现在小编对学到的进行一次总结,先来看一个demo 1 public class TimerTest { 2 3 public static void mai ...