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>