Jquery表格奇偶行不同颜色

最新推荐文章于 2020-06-21 02:14:51 发布

chenwq1988

最新推荐文章于 2020-06-21 02:14:51 发布

阅读量239

点赞数

分类专栏： jQuery 文章标签： javascript xhtml java ViewUI

本文链接：https://blog.csdn.net/chenwq1988/article/details/84058548

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>dm</title>
		<link rel="stylesheet" type="text/css" href="css/style_dm.css" />
		<link rel="stylesheet" type="text/css" href="css/style2.css" />
		<style>
			<!--
				.even {background:#eef1f8;}
				.odd  {background:#ffffff;}
				.selected {background:#d3dbec;}
			-->
		</style>
		<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("tbody>tr:odd").addClass("odd");	//为奇数行添加样式
				$("tbody>tr:even").addClass("even");	//为偶数行添加样式
				$("tbody>tr").mouseover(function(){		//鼠标移动的高亮显示
					$(this).addClass("selected");
				}).mouseout(function(){
					$(this).removeClass("selected");
				});
			});

		</script>
	</head>
	<body class="general-page">

		<div class="content">
			<!-- Logo -->
			<h1 id="logo">
				<a href="/">Yahoo! Labs</a>
			</h1>
			<!-- Top Navigation -->
			<div class="navigation">
				<ul id="topNav">
					<li>
						<a href="index.jsp">Upload Answer</a>
					</li>
					<li>
						<a href="ranklist.jsp">Rankboard</a>
					</li>
				</ul>
			</div>
			<!-- Content -->
			<div id="buckets">
				<table border="0" cellpadding="3" cellspacing="0" width="700"
					
					style="margin-left: 15px; margin-top: 20px; margin-bottom: 20px;">
					<thead>
					<tr style="background-color:#d3dbec">
						<td class="tdDatah" width="1" align="right">
							Rank
						</td>
						<td class="tdDatah">
							Student ID
						</td>
						<td class="tdDatah" align="right">
							RMSE
						</td>
						<td class="tdDatah" align="right">
							Spearman
						</td>
					</tr>
					</thead>
					<tbody>
					<s:iterator value="rankLst" status="stat" id="rank">
						<tr>
							<td class="tdData1" align="right">
								<s:property value="#rank.rank" />
							</td>
							<td class="tdData1" align="right">
								<s:property value="#rank.stuNo" />
							</td>
							<td class="tdData1" align="right">
								<s:property value="#rank.rmse" />
							</td>
							<td class="tdData1" align="right">
								<s:property value="#rank.spearman" />
							</td>
						</tr>

					</s:iterator>
				</tbody>
				</table>
			</div>
		</div>

		<div id="footer">
			<div>
				<a href="http://59.77.16.75/main/">Data Mining Group@Xiamen
					University</a>
				<br>
				&copy; 2011 DM Course
			</div>
		</div>
	</body>
</html>