1.新建一個js文件，例如：table.js
function changeTableBg()
{
var changeTr = document.getElementById("myTable")
.getElementsByTagName("tr");
for ( var i = 0; i < changeTr.length - 1; i++)
{
changeTr[i].className = (i % 2 > 0) ? "even" : "odd";
changeTr[i].temp = changeTr[i].className;
changeTr[i].onmouseover = function()
{
this.className += 'hover';
this.className='MouseOver'; //用於ie內核瀏覽器
}
changeTr[i].onmouseout = function()
{
this.className = this.temp;
}
}
}
2.新建一個css文件table.css並在裏面加入下列代碼
@CHARSET "UTF-8";
/*自動換行變色第一行的顏色*/
tr.even td {
background: #f8fbfc; /*#DFE7F2*/
}
/*自動換行變色第二行的顏色*/
tr.odd td {
background: #e5f1f4; /*#f8fbfc/#f7f7f7*/
}
/*鼠標經過該行時的顏色*/
tr.hover td {
background-color: #FFD900; /*--*/
}
/*--下面是用於ie內核鼠標進過變色的*/
tr.MouseOver td {
background: #FFD900;
}
tr.out td {
}
p,td,th {
font: 0.8em Arial, Helvetica, sans-serif;
}
2.在jsp頁面中引入table.js文件
下面只是一個引用的例子
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"
isELIgnored="false"%>
<%@ taglib prefix="pg" uri="http://jsptags.com/tags/navigation/pager"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
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>JUST FOR NEW</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">
<!-- 導入css-->
<link rel="stylesheet" type="text/css"
href="<%=request.getContextPath()%>/css/table.css"><!--路徑不一樣自行更改-->
<script type="text/javascript"
src="<%=request.getContextPath()%>/js/table.js"><!--引入table.js-->
</script>
</head>
<body οnlοad="changeTableBg();"><!---加載js中的函數->
<c:if test="${empty userList}">
<h4>
<font color="red">對不起，沒有相應的信息……</font>
</h4>
</c:if>
<c:if test="${not empty userList}">
<table class="datatable" id="myTable"><!--這裏的表給的id必須與table.js中的一致-->
<caption></caption>
<tr>
<th scope="col" width="10%">編號</th>
<th scope="col" width="10%">姓名</th>
<th scope="col" width="20%">郵箱</th>
<th scope="col" width="35%">操作</th>
</tr>
<c:if test="${not empty userList}">
<c:forEach items="${userList}" var="user" varStatus="status_var">
<tr>
<td>${user.userId}</td>
<td>${user.username}</td>
<td>${user.email}</td>
<td><a
href="<%=request.getContextPath()%>/DeleteUser?id=${user.userId}"
onClick="return deleteConfirm()"> 刪除 </a><a
href="<%=request.getContextPath()%>/GetUserById?id=${user.userId}"
onClick="return updateConfirm()"> 更新</a> </td>
</tr>
</c:forEach>
</c:if>
<tr>
<td colspan="7" align="center">
<jsp:include page="../pager/pager.jsp">
<jsp:param name="url" value="./GetUserServlet" />
<jsp:param value="${totalRecord}" name="totalRecord" />
</jsp:include></td>
</tr>
</table>
</c:if>
</body>
</html>