当前位置： 代码迷 >> Web前端 >> jQuery 兑现隔行换色
  详细解决方案

jQuery 兑现隔行换色

热度：124   发布时间：2012-10-19 16:53:35.0
jQuery 实现隔行换色
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
	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 'Jquery003.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">
		
		<script type="text/javascript" src="js/jquery-1.6.1.js"></script>
		<!-- 用javascript实现隔行换色
		<script type="text/javascript">
			window.onload = function(){
				var trs = document.getElementsByTagName("tr");
				for(var i=0;i<trs.length;i++){
					if(i%2==0){
						trs[i].style.backgroundColor = "red";
					}else{
						trs[i].style.backgroundColor = "blue";
					}
				}
			}
		</script>
 		-->
		<!-- 用Jquery实现隔行换色  -->
		<script type="text/javascript">
			$(document).ready(function() {
				$("#table1 tr:even").css("background", "#ECF5FF");
				$("#table1 tr:odd").css("background", "#D8D8EB");
			});
		</script>
	</head>

	<body>
		<table id="table1" border="1" cellpadding="0px" cellspacing="0px"
			width="700px" style="line-height: 30px;">
			<tbody>
				<tr>
					<td>aaaaaa</td>
					<td>aaaaaa</td>
					<td>aaaaaa</td>
					<td>aaaaaa</td>
				</tr>
				<tr>
					<td>bbbbbb</td>
					<td>bbbbbb</td>
					<td>bbbbbb</td>
					<td>bbbbbb</td>
				</tr>
				<tr>
					<td>cccccc</td>
					<td>cccccc</td>
					<td>cccccc</td>
					<td>cccccc</td>
				</tr>
				<tr>
					<td>dddddd</td>
					<td>dddddd</td>
					<td>dddddd</td>
					<td>dddddd</td>
				</tr>
				<tr>
					<td>eeeeee</td>
					<td>eeeeee</td>
					<td>eeeeee</td>
					<td>eeeeee</td>
				</tr>
				<tr>
					<td>ffffff</td>
					<td>ffffff</td>
					<td>ffffff</td>
					<td>ffffff</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>
?
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.