您的位置：首页 > Web前端 > JavaScript

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

2013-03-16 10:51 716 查看

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



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

<input type="button" onclick="sub()" value="查询" name="btn">

</form>

</div>

</div>

</body>

</html>

http://shop59544428.taobao.com/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航