javascript实现动态表格的换行变色

最新推荐文章于 2023-03-27 11:12:14 发布

shalousun

最新推荐文章于 2023-03-27 11:12:14 发布

阅读量2.4k

点赞数

文章标签： javascript 表格变色

本文链接：https://blog.csdn.net/shalousun/article/details/12410511

版权

1.新建一个js文件，例如：table.js

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">

<link rel="stylesheet" type="text/css"
   href="<%=request.getContextPath()%>/css/table.css">

<script type="text/javascript"
   src="<%=request.getContextPath()%>/js/table.js">
</script>

</head>

<body οnlοad="changeTableBg();">
           <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>

shalousun

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript实现动态表格的换行变色

1.新建一个js文件，例如：table.jsfunction changeTableBg(){ var changeTr = document.getElementById("myTable") .getElementsByTagName("tr"); for ( var i = 0; i { changeTr[i
复制链接

扫一扫