<!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. Tornado-StaticFileHandler参考

    StaticFileHandler ====== tornado.web.StaticFileHandler 源代码中的解释 class StaticFileHandler(RequestHandle ...

  2. 暑假集训D11总结

    %dalao 今天某学长来讲一个极其高深的数据结构——线段树(woc哪里高深了),然而并没有时间整理笔记= =,所以明天在扔笔记咯= = 考试 今天考试,一看数据范围,woc暴力分给的真足,然后高高兴 ...

  3. 种下一棵树：有旋Treap

    第一个平衡树板子,有旋Treap.用随机函数规定一个堆,维护点权的同时维护堆的性质,可以有效地避免退化成链.按我的理解,建立一棵二叉排序树,树的形态会和给出节点的顺序有关.按照出题人很机智定理,数据肯 ...

  4. java大数取余

    java大数取余: 类方法:BigInteger.divideAndRemainder() 返回一个数组,key = 0为商key = 1为余数 import java.util.*; import ...

  5. RabbitMQ --- Work Queues（工作队列）

    目录 RabbitMQ --- Hello Mr.Tua 前言 Work Queues 即工作队列,它表示一个 Producer 对应多个 Consumer,包括两种分发模式:轮循分发(Round-r ...

  6. vue指令v-bind示例解析

    1.绑定一个属性 <img id="app" v-bind:src="imageSrc"> <script> var app = Vue ...

  7. Fancytree Javascript Tree的入门使用

    Fancytree Javascript Tree的入门使用 一.概念----是做什么的能干什么 Fancytree是一个Javascript控件,它依赖于: <script src=" ...

  8. Python查询SQLserver数据库备份（抛砖引玉）

    通过python pymssql直接访问SQLserver数据库,查找其数据库mode,这个脚本具有很强的抛砖引玉特性: 1.可以巡检多台多数据库服务器 2.query内容可以多样化,譬如查询死锁.连 ...

  9. 【HTTP权威指南】第1 章　HTTP 概述

    1.1 HTTP--因特网的多媒体信使 ................................................................................ ...

  10. HDU 4662 MU Puzzle：找规律

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4662 题意: 初始字符串为"MI". 有三个操作: (1)将'M'之后的所有字符翻 ...