`
yin_jw
  • 浏览: 47810 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

jQuery 实现隔行换色

jQueryJavaScriptCSSJSPCache 
阅读更多 
<%@ 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>
 
分享到：
| jQuery准备
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics