<!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. vc++MFC开发上位机程序

    用vc++MFC开发过不少跟单片机通讯的上位机程序了.搞懂了MFC架构,开发还是很快的,与底层单片机程序通讯,可以用串口.usb.网络.短信形式.串口现在用的越来越少了,一般电脑跟单片机在一块,使用串 ...

  2. java对excel表格的上传和下载处理

    Excel表格文件的上传和下载,java中涉及到文件肯定会有io流的知识. 而excel文件就要涉及到poi技术,而excel的版本包括:2003-2007和2010两个版本, 即excel的后缀名为 ...

  3. error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏

    一.情形描述 下载了一个VS的源码,不知道此源码的版本.使用VS2010编译时出现如下报错: error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏 二.解决方法 在VS2010界 ...

  4. 表达式求值（二叉树方法/C++语言描述）（三）

    二叉树方法求值对运算数处理的方法与栈方法求值不太相同,除了将字符串中的运算数转换为浮点类型外,还需要生成新的节点: void Calculator::dealWithNumber(char *& ...

  5. NET中解决KafKa多线程发送多主题的问题

    一般在KafKa消费程序中消费可以设置多个主题,那在同一程序中需要向KafKa发送不同主题的消息,如异常需要发到异常主题,正常的发送到正常的主题,这时候就需要实例化多个主题,然后逐个发送. 在NET中 ...

  6. nodejs模块学习： express-session 解析

    nodejs模块学习: express-session 解析 nodejs 发展很快,从 npm 上面的包托管数量就可以看出来.不过从另一方面来看,也是反映了 nodejs 的基础不稳固,需要开发者创 ...

  7. 分享一道JS前端闭包面试题

    输出以下代码的结果 function fun(n,o){ console.log(o); return { fun:function(m){ return fun(m,n);//[1] } } } v ...

  8. Python使用PDFMiner解析PDF

    近期在做爬虫时有时会遇到网站只提供pdf的情况,这样就不能使用scrapy直接抓取页面内容了,只能通过解析PDF的方式处理,目前的解决方案大致只有pyPDF和PDFMiner.因为据说PDFMiner ...

  9. Linux下使Shell 命令脱离终端在后台运行

    --Linux下使Shell 命令脱离终端在后台运行------------------------------------2014/02/14你是否遇到过这样的情况:从终端软件登录远程的Linux主 ...

  10. php创建多级目录完整封装类操作

    创建多级目录函数中调用创建指定下的指定文件的函数: public function create_dir($dir,$mode=0777) { return is_dir($dir) or ($thi ...