利用CSS实现一览数据的奇偶行颜色不同

最新推荐文章于 2024-08-15 00:06:54 发布

原创最新推荐文章于 2024-08-15 00:06:54 发布 · 4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #border #iterator #url #table #action

本文介绍了一个游戏管理界面的设计实现，包括使用Struts标签库进行页面布局、通过JavaScript进行查询功能的交互，以及如何利用CSS样式美化表格显示效果。

table thead tr th {

border: 1px solid black;

padding: 3px;

background-color: #cccccc;

background-color: expression(this.rowIndex % 2 == 0 ? "#FFFFFF" : "#EEEEEE");

}

table tbody tr td {

border: 1px solid black;

padding: 3px;

}

.trs{

background-color: expression(this.rowIndex % 2 == 0 ? "#FFFFFF" : "#EEEEEE");

}

全部的jsp代码：

<%@page pageEncoding="GBK" contentType="text/html; charset=GBK"%>

<%@ taglib prefix="s" uri="/struts-tags"%>

<html>

<head>

</head>

table {

border: 1px solid black;

border-collapse: collapse;

}

table thead tr th {

border: 1px solid black;

padding: 3px;

background-color: #cccccc;

background-color: expression(this.rowIndex % 2 == 0 ? "#FFFFFF" : "#EEEEEE");

}

table tbody tr td {

border: 1px solid black;

padding: 3px;

}

.trs{

background-color: expression(this.rowIndex % 2 == 0 ? "#FFFFFF" : "#EEEEEE");

}

</style>

function doSearch(){

if(document.all.searchValue.value=="")

{

alert("请输入查询关键字!");

}else{

window.location.href="/game/products/list.action?queryName="+document.all.searchName.value+"&&queryValue="+document.all.searchValue.value;

}

</script>

<body>

<td><a href="<s:url action="list" includeParams="none"/>">查看所有对象</a>

<a href='<s:url action="edit" ></s:url>'>创建新对象</a> <select

name="searchName">

</select> <input type="text" name="searchValue" value="" size="10" /> <input

type="button" value="查询" onClick="doSearch();"></td>

</tr>

<tr>

<td>

<thead>

<tr>

</tr>

</thead>

<tbody>

<s:iterator value="availableItems">

<td><a

href='<s:url action="edit" ><s:param name="gameId" value="gameId" /></s:url>'>

<s:property value="gameNameCn" /> </a></td>

中文版

</s:if> <s:elseif test="2 == gameVersion">

英文版

</s:elseif></td>

</s:if> <s:elseif test="2 == gameMedia">

DVD5

</s:elseif></td>

正版

</s:if> <s:elseif test="2 == gameCopyright">

翻版

</s:elseif></td>

</tr>

</s:iterator>

<td colspan="9">共<s:property value="totalRows" />行 

第<s:property value="currentPage" />页  共<s:property

value="pager.getTotalPages()" />页  <a

href="<s:url value="list.action">

<s:param name="currentPage" value="currentPage"/>

<s:param name="pagerMethod" value="'first'"/>

</s:url>">首页</a>

href="<s:url value="list.action">

<s:param name="currentPage" value="currentPage"/>

<s:param name="pagerMethod" value="'previous'"/>

</s:url>">上一页</a>

href="<s:url value="list.action">

<s:param name="currentPage" value="currentPage"/>

<s:param name="pagerMethod" value="'next'"/>

</s:url>">下一页</a>

href="<s:url value="list.action">

<s:param name="currentPage" value="currentPage"/>

<s:param name="pagerMethod" value="'last'"/>

</s:url>">尾页</a>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</table>

</body>

</html>