<!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>
© 2011 DM Course
</div>
</div>
</body>
</html>
分享到：
相关推荐
1. **奇偶行颜色交替**：这个功能使得表格的每一行根据其行号呈现出不同的背景色。通常，偶数行会使用一种颜色，奇数行使用另一种颜色。这种设计有助于提高可读性，使用户能够更容易地跟踪他们正在查看的数据行，...
最近用到表格奇偶行不同色，不得不去再看jquery，虽然感觉还是难，但已经不像以前一样无从下手了。做完后不得不来感叹一下jquery真是太牛了，不用自己再写一大堆javascript函数去实现了，简单几句轻松搞定。 先定义...
为了解决这个问题，我们可以采用一种简单的视觉区分技术，那就是通过奇偶行不同颜色的设置，提高表格数据的可读性。这种方法尤其在数据行较多时效果显著，它可以帮助用户更快地区分每一行数据，从而提升整体的用户...
在本项目中，我们主要探讨如何制作一个自定义的jQuery插件，用于实现表格的特殊样式功能，包括奇偶行颜色交替、鼠标滑过时的颜色变化以及单击高亮的效果。这个插件对于提高用户体验和美化网页数据展示具有显著作用。...
如果希望在表格加载时就显示斑马线效果（即奇偶行不同颜色），可以通过传递配置对象的方式进行设置： ```javascript $(document).ready(function(){ $("#large").tableSorter({ stripingRowClass: ['odd', 'even'...
做表格的时候，经常要让奇偶行显示不同背景色，一来使表格显得更美观，二来使同行数据查找更快捷方便。通常我们是怎么实现的呢？就是在每个tr标签上加css样式。 代码如下所示： <html> <style type=text/...
通过引入jQuery，可以轻松实现对表格奇偶行样式的赋值。在上述提供的代码示例中，首先在HTML文档的标签中引入了jQuery的库文件，接着定义了两张表的CSS样式。这里的两张表分别对应奇数行和偶数行。通过给CSS规则分别...
在网页设计中，表格是一种常见的数据展示方式，但单一的颜色可能会让页面显得单调，难以区分不同的数据行。为了解决这个问题，"表格奇数偶数行条纹效果"被广泛采用，它通过交替颜色的方式使表格更加清晰易读。本教程...
### 使用jQuery和CSS设置表格奇偶行背景色 在网页设计与开发中，为了提高表格数据的可读性，我们经常需要对表格中的奇数行和偶数行设置不同的背景颜色。这种做法不仅可以使表格看起来更加美观，还能帮助用户更轻松...
1. 为表格的每个`<tr>`元素添加一个自定义类，例如`even`或`odd`，这可以通过循环遍历表格行并根据奇偶性动态添加。 2. 在CSS中定义这两个类的背景颜色，如`.even { background-color: #F5F5F5; }` 和 `.odd { ...
在这个例子中，我们遍历表格中的每一行，并根据行号（索引）的奇偶性添加不同的CSS类。然后，在CSS中定义这两个类的背景色，就可以实现颜色交替的效果。 然而，如果表格内容是动态加载或者分页的，我们需要确保在新...
在前端开发中，为表格中的奇数行和偶数行设置不同样式是常见的需求，这样做可以提升用户阅读表格数据时的视觉体验。本文将介绍如何使用jQuery来实现这一效果，并结合提供的代码段进行详细解析。 首先，我们可以看到...
标题“表格各行换色”指的是在电子表格或者网页中，为增强数据可读性，每行或每列采用不同颜色交替显示的一种技巧。这通常应用于大数据量的表格中，使得用户能更容易地区分不同的行，避免视觉疲劳。下面将详细阐述...
本文将详细探讨如何利用JavaScript（JS）和JQuery库实现网页中表格行（tr元素）的奇偶行背景颜色自定义效果。奇偶行背景颜色差异化是一种常见的用户界面改进，它有助于提高数据的可读性和视觉效果。本文将介绍两种...
在jQuery中，可以通过遍历表格的行（tr）并根据行的索引（奇偶性）来设置不同的背景颜色。例如： ```javascript $("table tbody tr:even").css("background-color", "#F5F5F5"); $("table tbody tr:odd").css(...
通过这种方式，我们成功地利用jQuery实现了表格的奇偶行换色。这个技术可以广泛应用于各种网页应用，尤其是在展示数据列表时，能提供更好的用户体验。 总结一下，本篇文章主要介绍了如何在J2EE项目中使用jQuery来...
接着，我们将为表格定义CSS样式，以便在不同状态下显示不同的颜色。例如，我们可以创建以下CSS类： ```css .tab_even { background-color: #f0f0f0; /* 默认状态，灰色背景 */ } .tab_odd { background-color: ...