JavaScript实现隔行换颜色

<!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>

posted @ 2017-09-09 23:00  毫无代价  阅读(274)  评论(0编辑  收藏  举报