现在的位置: 首页 > 综合 > 正文

jsp制作复合表头并循环产生表格内容,控制隔行变色、鼠标经过改变背景色等操作

2018年01月23日 ⁄ 综合 ⁄ 共 6009字 ⁄ 字号 评论关闭

http://shop59544428.taobao.com/

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/pages/commons/taglibs.jsp"%>

<html>
<head>
<base href="${basePath}" />
<%@ include file="/WEB-INF/pages/commons/meta.jsp"%>
<link rel="stylesheet" type="text/css" href="scripts/jqueryEasyUI/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="scripts/jqueryEasyUI/themes/icon.css">
<link rel="stylesheet" type="text/css" href="scripts/jqueryEasyUI/themes/main.css">
<script type="text/javascript" src="scripts/jqueryEasyUI/src/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="scripts/jqueryEasyUI/src/jquery.easyui.min1.js"></script>
<script type="text/javascript" src="scripts/jqueryEasyUI/src/jquery.easyui.min.js"></script>
<script type="text/javascript" src="scripts/jqueryEasyUI/src/jquery.datagrid.js"></script>
<script type="text/javascript" src="scripts/jqueryEasyUI/src/jgxLoader.js"></script>
<title>协同单统计管理</title>
<style >
    body{ font-family:Arial, Helvetica, sans-serif;}
    a{text-decoration: none;}
   
</style>
<style type="text/css">
<!--
a:link {
 color: #3764a0;
 text-decoration: none;
 font-weight: bold;
}

a:visited {
 text-decoration: none;
 color: #3764a0;
 font-weight: bold;
}

a:hover {
 text-decoration: none;
 color: #999;
}

a:active {
 text-decoration: none;
}
-->
</style>
    <script type="text/javascript">
    function showOpt(value){
        var str = value.split(',');
        var id = str[0];
        var statue = str[1];
    if(id==''){
   alert('请选择要操作的信息!');
   return;
  }else{
   $('#evnJobid').val(id);
   if(statue==11||statue==12||statue==15||statue==18){
    statue=9;
   }
   $.post("synjobs/json/getStatueByFid.json",{id:statue}, function(data) {//url中的方法路径必须有/json/
    var a = data.list;
    var newPas=document.getElementById('evnStatue');
    newPas.options.length=1;
    for(var i in a){
     var loption=document.createElement("OPTION");
     loption.value=a[i].evnStatue;
     loption.text=a[i].evnStatueName;
     newPas.options.add(loption);
    }
   });
  }
  $('#dlg').dialog({
   title:'审核',
   width:400,
   height:200,
   closed:false,
   buttons:{
     '确定':function(){
      if($('#evnStatue').val()==0){
       alert('请选择操作!');
       return;
      }
      $('#upt').submit();
     },
     '关闭':function(){
      $('#dlg').dialog({closed:true});
     }
    }
  });
 }
    function showOptDetail(id){
     $('#showOptDetailWin').window('open');
  optDetails(id);
     }
 function closeWin(){
  $('#showOptDetailWin').window('close');
 }
 function sub(){
  if($('#time1').val()==''||$('#time2').val()==''){
   alert('请将时间段查询填写完整!');
   return;
  }else{
   $('#ff').submit();
  }
 }
   
 </script>
 
<script type="text/javascript">
function changeTable(o,a,b,c,d){
 var t=document.getElementById(o).getElementsByTagName("tr");
 for(var i=4;i<t.length;i++){
  t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
  t[i].onclick=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].onmouseover=function(){
   if(this.x!="1")this.style.backgroundColor=c;
  };
  t[i].onmouseout=function(){
   if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
  };
 }
}

</script>
<script type="text/javascript">
$(function(){
 $('body').layout();
 changeTable("count","#fff","#ccc","#cfc","#f00");
});

</script>
</head>
<body style=" padding:0; margin:0">
 <div region="center" title="协同单统计管理" align="center"><br><br><br>
  <table id="count" width="50%" border="0" cellspacing="2" cellpadding="2" style=" height:160px;text-align: center;" bgcolor="#b9d8f3"  class="size">
   <tr bgcolor="#FFFFFF" >
    <td colspan=12>公司内部协同单数量统计【${time1}~${time2}】</td>
   </tr>
   <tr bgcolor="#FFFFFF" >
    <td rowspan=3>姓名</td>
    <td colspan=3>申请量(以申请时间划分)</td>
    <td colspan=7>执行量(以开始执行时间划分)</td>
   </tr>
   <tr bgcolor="#FFFFFF" >
    <td rowspan=2>已完成量</td>
    <td rowspan=2>未完成量</td>
    <td rowspan=2>合计</td>
    <td colspan=3>已完成量</td>
    <td colspan=3>未完成量</td>
    <td rowspan=2>合计</td>
   </tr>
   <tr bgcolor="#FFFFFF" >
    <td >正常完成量</td>
    <td >超时完成量</td>
    <td >废弃量</td>
    <td >正常未完成量</td>
    <td >超时未完成量</td>
    <td >待执行量</td>
   </tr>
   <c:forEach items="${list}" var="b">
      <tr bgcolor="#FFFFFF">
       <td><font size="2px" >${b.userName}</font></td>
       <td><a href="synjobs/toAllJobs?time1=${time1}&time2=${time2}&appuser=${b.user}&statue=appfinished" style="text-decoration:underline;">${b.appfinished}</a></td>
       <td><a href="synjobs/toAllJobs?time1=${time1}&time2=${time2}&appuser=${b.user}&statue=appunfinished" style="text-decoration:underline;">${b.appunfinished }</a></td>
       <td>${b.appeachtotal }</td>
       <td><a href="synjobs/toAllJobs?time1=${time1}&time2=${time2}&accuser=${b.user}&statue=accsucCompete" style="text-decoration:underline;">${b.accsucCompete }</a></td>
       <td><a href="synjobs/toAllJobs?time1=${time1}&time2=${time2}&accuser=${b.user}&statue=accoverCompete" style="text-decoration:underline;">${b.accoverCompete }</a></td>
       <td><a href="synjobs/toAllJobs?time1=${time1}&time2=${time2}&accuser=${b.user}&statue=accfeiqi" style="text-decoration:underline;">${b.accfeiqi }</a></td>
       <td><a href="synjobs/toAllJobs?time1=${time1}&time2=${time2}&accuser=${b.user}&statue=accunfinished" style="text-decoration:underline;">${b.accunfinished }</a></td>
       <td><a href="synjobs/toAllJobs?time1=${time1}&time2=${time2}&accuser=${b.user}&statue=accoverUnfinished" style="text-decoration:underline;">${b.accoverUnfinished }</a></td>
       <td><a href="synjobs/toAllJobs?time1=${time1}&time2=${time2}&accuser=${b.user}&statue=accwaitExecute" style="text-decoration:underline;">${b.accwaitExecute }</a></td>
       <td>${b.acceachtotal }</td>
      </tr>
  </c:forEach>
  </table><br>
  <div>
   <form name = "ff"  id="ff" action="synjobs/toStatisticsManage" method="post">
   请输入时间段:<input class="easyui-datebox" name="time1" size="9"  id="time1" />--<input class="easyui-datebox" name="time2" size="10"  id="time2" />
     &nbsp;&nbsp;&nbsp;<input type="button" onclick="sub()" value="查询" name="btn">
   </form>
  </div>
 </div>
 
 
</body>
</html>

 

http://shop59544428.taobao.com/

抱歉!评论已关闭.