日期:2014-05-16  浏览次数:20315 次

一个简单的JS实现表格隔行换色的实例

??????? JavaScript的强大我不用说了,这几天学习下来收获蛮多的,于是写了几个案例,对于初学者还是有用的。看代码:

???????

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>My JSP 'tablecolor.jsp' starting page</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
		<script type="text/javascript">

function icolor() {

	var itr = document.getElementById("itable").rows;

	for (i = 0; i < itr.length; i++) {

		(i % 2 == 0) ? (itr[i].style.background = "#FFFFFF")

		: (itr[i].style.background = "#99CCFF");

	}

	document.get

}
</script>
	</head>

	<body onload="icolor();">
		<table border="1" cellpadding="0" cellspacing="0" width="480"
			height="200" style="border-collapse: collapse" align="center"
			id="itable">
			<caption>

				<font size="5" color="red" face="华文行楷">学生信息</font>

			</caption>
			<tr>
				<th>
					编号
				</th>
				<th>
					姓名
				</th>
				<th>
					性别
				</th>
				<th>
					邮箱
				</th>
			</tr>
			<c:forEach begin="1" end="5" var="num">
				<tr>
					<td align="center">
						${num }
					</td>
					<td align="center">
						Tom${num }
					</td>
					<td align="center">
						男
					</td>
					<td align="center">
						sxpgog@sina.com
					</td>
				</tr>
			</c:forEach>
		</table>
	</body>
</html>

?