【struts2】用struts2传数据，前台左侧导航css+js，table显示隔行变色，css样式。

于 2011-09-08 11:12:00 发布
阅读量940 收藏
点赞数
分类专栏： 【JAVA】 文章标签： struts css table url function action
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hateson/article/details/6759469
版权 
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title><s:text name="address.page.title" /></title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="default.css">
<style type="text/css">
/**************************左侧导航1 start***********************************/
.markermenu{ 
    list-style-type: none; 
    margin: 5px; 
    border: 0px solid #9A9A9A; 
    width: 200px; 
} 

.markermenu li a{ 
    background: white url(./image/arrow-list.gif) no-repeat 2px center; 
    font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif; 
    color: #00014e; 
    display: block; 
    padding: 5px 5px 5px 20px; 
    text-decoration: none; 
    border-bottom: 1px solid #B5B5B5; 
    margin: 0px; 
    width: 150px; 
} 

.markermenu li a:active, .markermenu li a:active{ 
color: #00014e; 
}

.markermenu li a:ACTIVE{ 
color: black; 
background-color: #F5F5F5; 
background-image:url(./image/arrow-list-red.gif);  /*onMouseover image change. Remove if none*/ 
} 

/********************************左侧导航1 end*****************************/

.btn3_mouseup {
	BORDER-RIGHT: #2C59AA 1px solid; 
	PADDING-RIGHT: 2px; 
	BORDER-TOP:#2C59AA 1px solid; 
	PADDING-LEFT: 2px; 
	FONT-SIZE: 12px; 
	FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#C3DAF5); 
	BORDER-LEFT: #2C59AA 1px solid; 
	CURSOR: hand; 
	COLOR: black; 
	PADDING-TOP: 2px;     
	BORDER-BOTTOM: #2C59AA 1px solid   
}

.test{    
width:100px;     
}  
/********************************模态div start*****************************/
<!--模态div
.black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:10001;
            -moz-opacity: 0.8;            
            opacity:.80;
            filter: alpha(opacity=65);
}
.white_content {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 40%;
            height: 40%;
            padding: 16px;
            border: 16px solid #4682B4;
            background-color: white;
            z-index:10002;
            overflow: auto;
}


-->
/********************************模态div end*****************************/
</style>
<SCRIPT type="text/javascript">	
//复选框全选
function checkAll(){
    var a = document.getElementsByName("checkBox");   
    var n = a.length;   
    for (var i=0; i<n; i++){
    	a[i].checked = window.event.srcElement.checked;
    }
} 
//选择
function chanageRead(){
	document.forms[0].aciton = "desktop!findAddresser.do";
	document.forms[0].submit();
}
//回复div显示
function opendiv(lixing){
	var flag="";
	var checks = window.document.forms[0].checkBox;	
	for(var j=0;j<=checks.length;j++)
	{
		try
		{
			if(checks[j].checked==true)
			{			
				flag="Y";			
			}
		 }catch(e){
		
		 }
	}
	 if(flag==""){
	 	alert("请选择需要回复的报表数据！");
		return false;
	 }
	document.forms[0].suggestion.value = '';
	document.getElementById('light').style.display='block';
	document.getElementById('fade').style.display='block';
}
//回复div隐藏
function colsediv(lixing){
	document.getElementById('light').style.display='none';
	document.getElementById('fade').style.display='none';
}
//隔行变色
function senfe(o,a,b,c,d){
 var t=document.getElementById(o).getElementsByTagName("tr");
 for(var i=0;i<t.length;i++){
  t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
//  t[i].οnclick=function(){
//   if(this.x!="1"){
//    this.x="1";//本来打算直接用背景色判断，FF获取到的背景是RGB值，不好判断
//    this.style.backgroundColor=d;
//   }else{
//    this.x="0";
//    this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
//   }
//  }
  t[i].οnmοuseοver=function(){
   if(this.x!="1")this.style.backgroundColor=c;
  }
  t[i].οnmοuseοut=function(){
   if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
  }
 }
 
 var liArr=document.getElementsByTagName("li") 
 for (i=0;i<liArr.length;i++){ 	
	 liArr[i].οnclick=function(){
	 	allLi[i].className="btn3_onclick";
	 }
 }
}
//查看
function view(obj){
	document.forms[0].action = "desktop!viewAddresser.do?reportinfoid="+obj;
	document.forms[0].submit();
}
</SCRIPT>

</head>
<body>
<s:form name="form1" action="desktop!" method="post" theme="simple">
<s:actionerror /> <s:actionmessage />
<TABLE border="0" width="100%" height="100%">
	<tr>
		<td width="180px" valign="top">
			<ul id="menuID" class="markermenu"> 
			<li id="l0" οnclick="a()">
				<s:url id="url" action="desktop!findAddresser.do"> 
					<s:param name="bblxState">0</s:param> 
				</s:url>
				<s:a id="a0" href="%{url}">全部报表</s:a>
			</li> 
			<li id="l1" >
				<s:url id="url" action="desktop!findAddresser.do"> 
						<s:param name="bblxState">1</s:param> 
					</s:url> 
				<s:a id="a1" href="%{url}">勘探开发</s:a>
			</li> 
			<li id="l2">
				<s:url id="url"> 
			              <s:param name="bblxState">2</s:param> 
			       </s:url> 
			    <s:a id="a2" href="%{url}">生产运行</s:a>
			</li> 
			<li id="l3"">
				<s:url id="url" action="desktop!findAddresser.do"> 
						<s:param name="bblxState">3</s:param> 
					</s:url> 
				<s:a id="a3"  href="%{url}">经营管理</s:a>
			</li> 
			<li id="l4"">
				<s:url id="url" action="desktop!findAddresser.do"> 
					<s:param name="bblxState">4</s:param> 
				</s:url> 
				<s:a id="a4"  href="%{url}">人力资源</s:a>
			</li> 
			<li id="l5"">
				<s:url id="url" action="desktop!findAddresser.do"> 
					<s:param name="bblxState">5</s:param> 
				</s:url> 
				<s:a id="a5" href="%{url}">经营管理</s:a>
			</li> 
			<li id="l6"">
				<s:url id="url" action="desktop!findAddresser.do"> 
					<s:param name="bblxState" >6</s:param> 
				</s:url> 
				<s:a id="a6" href="%{url}">综合信息</s:a>
			</li> 
		</ul> 
	</td>
	<td valign="top">
		<table width="100%">
			<tr>
				<td align="left">
					<s:radio name="readState" list="%{#{'0':'全部','1':'未读','2':'已读'}}" οnclick="chanageRead()()"></s:radio>
				</td>
				<td align="right">
					<input type="button" class="btn3_mouseup test" value="回　复" οnclick="opendiv(0)">
				</td>
			</tr>
		</table>
		<table id="TableNew" width="100%" border="1" class="t1">		
			<tr>
				<th align="center" width="50px">
					<input type="checkbox" id="all" οnclick="checkAll()">
				</th>
				<th align="center">报表编号</th>
				<th align="center">报表名称</th>
				<th align="center">发件人</th>
				<th align="center">发件日期</th>
				<th align="center">重要度</th>
				<th align="center">阅读次数</th>
			</tr>				
			<s:iterator value="pager.resultList">
			<tr style="<s:if test="AddresserBean.importantdegree == 1">color: black</s:if>
				<s:if test="AddresserBean.importantdegree == 2">color: black</s:if>
				<s:if test="AddresserBean.importantdegree == 3">color: black</s:if>
				<s:if test="AddresserBean.importantdegree == 4">color: darkred</s:if>
				<s:if test="AddresserBean.importantdegree == 5">color: red</s:if>					
				<s:if test="readState == '未读' or readSate == ''"> ;font-weight: bold</s:if>">
				<td align="center" width="50px">
					<s:checkbox name="checkBox" fieldValue="${AddresserBean.reportinfoid}"></s:checkbox>
				</td>
				<td align="center">
				<s:property value="AddresserBean.reportinfoid"/></td>
				<td align="center">
					<SPAN style="cursor: pointer;" οnclick="view('<s:property value="AddresserBean.reportinfoid"/>')">
						<s:property value="AddresserBean.reportTitle"/>
					</SPAN>
				</td>
				<td align="center"><s:property value="AddresserBean.sender"/></td>
				<td align="center"><s:date name="AddresserBean.sendtime" format="yyyy-MM-dd"/></td>
				<td align="center">
					<s:if test="AddresserBean.importantdegree == 1">★</s:if>
					<s:if test="AddresserBean.importantdegree == 2">★★</s:if>
					<s:if test="AddresserBean.importantdegree == 3">★★★</s:if>
					<s:if test="AddresserBean.importantdegree == 4">★★★★</s:if>
					<s:if test="AddresserBean.importantdegree == 5">★★★★★</s:if>
				</td>
				<td align="center"><s:property value="readNum"/></td>
			</tr>
			</s:iterator>
			<tr>
				<td colspan="7" align="right">
					共 <s:property value="pager.rowCount"/> 条记录
					共 <s:property value="pager.pageCount"/> 页
					当前第 <s:property value="pager.pageNo"/> 页
					<s:if test="%{pager.pageNo != 1 and pager.pageCount != 0}">
						<a href="desktop!findAddresser.do?pageNo=1">第一页</a>
						<a href="desktop!findAddresser.do?pageNo=<s:property value="%{pager.pageNo-1}"/>">上一页</a>
					</s:if>
					<s:if test="%{pager.pageNo != pager.pageCount and pager.pageCount != 0}">
						<a href="desktop!findAddresser.do?pageNo=<s:property value="%{pager.pageNo+1}"/>">下一页</a>
						<a href="desktop!findAddresser.do?pageNo=<s:property value="pager.lastPageNo"/>">最后一页</a>
					</s:if>	
				</td>
			</tr>
		</table>
	</td>
	</tr>
</TABLE>
<div id="light" class="white_content">
	<table >
		<tr>
			<td width="60px" style="vertical-align: top;">
				回复：
			</td>
			<td align="left">
				<s:textarea name="suggestion" cols="56" rows="8"></s:textarea>
			</td>			
		</tr>
		<tr>
			<td> </td>
		</tr>		
		<tr>
			<td colspan="2" align="center">
				<s:submit name="reply" value="确 定"  method="addReply" cssClass="btn3_mouseup test"></s:submit>
				 
				<input type="button" value="取 消" class="btn3_mouseup test" οnclick="colsediv(0)"/>
			</td>
		</tr>
	</table>
</div>
<div id="fade" class="black_overlay"></div>
</s:form>
<%--此方可以用Table行颜色的间隔    默认样式--%>

<script type="text/javascript" language="javascript">
	if(<s:text name="%{bblxState}"/> == null && "" == <s:text name="%{bblxState}"/>){
		bblxStateStr = 0;
	}else{
		bblxStateStr = <s:text name="%{bblxState}"/>;
	}	
	var seledctA = document.getElementById('a'+ bblxStateStr);
	seledctA.style.color = 'black';
	seledctA.style.backgroundColor = '#E6E6FA';
	seledctA.style.backgroundImage = 'url(./image/arrow-list-red.gif)';
	
//senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景");
senfe("TableNew","#fff","#f5fafe","#cfc","#f00");
</script>
</body>
</html>

刘痕
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值