table行交替颜色、鼠标移动到tr上改变颜色 -

dengli19881102

浏览: 362009 次
性别:
来自: 深圳

最近访客更多访客>>

changyuan126

xiaomabobo

zeroling

lzfstruggle

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

table行交替颜色、鼠标移动到tr上改变颜色

行交替颜色鼠标移动到tr上改变颜色

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src ="http://code.jquery.com/jquery.js"></script>
<style>
table tr td{ height : 30}
table tr td a{text-decoration:none; color:#999999}
table tr td a:hover{text-decoration:none; color:#238E23;}
</style>
<script type="text/javascript">
$(document).ready(function(){  
    // 行交替颜色
    $.each($("#table1 tr"), function(index){
	    if(index%2==0){
		    $(this).css({"backgroundColor" : "#E4F5FF"});
		}
		else{
		    $(this).css({"backgroundColor" : "#FFFFFF"});
		}
	}); 
	// 鼠标移动到tr上改变颜色
	$("#table1 tr").mouseover(function(){  
	    // 设置鼠标移动到tr上的背景色
	    $(this).css({"background-color":"#87CEEB"});  
	    // 设置a标签上字体为白色
	    $(this).find("a").css({"color":"#ffffff"});  
	    // 鼠标移动到a标签上字体变为绿色
	    $(this).find("a:hover").css({"color":"#238E23"});
	}).mouseout(function(event){  
	    var $index=$(this).index();  
	    if($index%2==0){  
	        // 设置鼠标移动到tr上的背景色
	        $(this).css({"background-color":"#E4F5FF"});  
	        // 鼠标移出还原之前a标签上字体绿色
	        $(this).find("a").css({"color":"#999999"}); 
	    }else{  
	        // 设置鼠标移动到tr上的背景色
	        $(this).css({"background-color":"#FFFFFF"}); 
	        // 鼠标移出还原之前a标签上字体绿色 
	        $(this).find("a").css({"color":"#999999"}); 
	    }  
	});
    // 暂停
	$(".pause").bind("click", function(e) {
	    pause($(this).attr("param"), $(this).attr("param1"));
	});
	// 恢复
	$(".recover").bind("click", function(e) {
	    recover($(this).attr("param"), $(this).attr("param1"));
	});
	// 删除
	$(".delete").bind("click", function(e) {
	    del($(this).attr("param"), $(this).attr("param1"));
	});
	// 启动一次
	$(".runOnce").bind("click", function(e) {
	    runOnce($(this).attr("param"), $(this).attr("param1"));
	});
	// 修改执行时间
	$(".editExpression").bind("click", function(e) {
	    // 任务名称
	    var jobName = $(this).attr("param");
	    // 任务分组
	    var jobGroup = $(this).attr("param1");
	    // 操作的当前行
	    var index = $(this).attr("param2");
	    // 任务运行时间表达式
	    var jobExp = $(this).attr("param3");
	    // 文本框id
	    var txtId= "txtId" + index;
	    // 获取span的class
	    var spanClass = ".spanOne" + index;
	    var taskObj = {"jobName" : jobName, "jobGroup" : jobGroup, "jobExp" : jobExp};
	    // 动态拼接文本框
	    var html = '<input id="'+txtId+'" type="text" value="'+ jobExp + '" param="'+ taskObj.jobName + '" param1="'+ taskObj.jobGroup + '" onblur="updateExpression('+ index +')"/>';
	    $(spanClass).html(html);
	});
});

// 暂停
function pause(jobName, jobGroup){
    $.ajax({
        type : "post",
        url : "http://localhost/schedule/pause.action",
        data : { "jobName" : jobName, "jobGroup" : jobGroup },
        cache : "false",
        async : false,
        success : function(response){
        	location.href="";
        }
    });
}
// 恢复
function recover(jobName, jobGroup){
    $.ajax({
        type : "post",
        url : "http://localhost/schedule/recover.action",
        data : { "jobName" : jobName, "jobGroup" : jobGroup },
        cache : "false",
        async : false,
        success : function(response){
        	location.href="";
        }
    });
}
// 删除
function del(jobName, jobGroup){
    $.ajax({
        type : "post",
        url : "http://localhost/schedule/delete.action",
        data : { "jobName" : jobName, "jobGroup" : jobGroup },
        cache : "false",
        async : false,
        success : function(response){
        	location.href="";
        }
    });
}
// 启动一次
function runOnce(jobName, jobGroup){
    $.ajax({
        type : "post",
        url : "http://localhost/schedule/runOnce.action",
        data : { "jobName" : jobName, "jobGroup" : jobGroup },
        cache : "false",
        async : false,
        success : function(response){
        	location.href="";
        }
    });
}
// 修改执行时间
function updateExpression(index){
    var ee= "#txtId" + index;
	var jobName = $(ee).attr("param");
	var jobGroup = $(ee).attr("param1");
	var jobExp = $(ee).val();
    $.ajax({
        type : "post",
        url : "http://localhost/schedule/updateExpression.action",
        data : { "jobName" : jobName, "jobGroup" : jobGroup, "cronExpression" : jobExp },
        cache : "false",
        async : false,
        success : function(response){
        	location.href="";
        }
    });
}

</script>

</head>
<body>
<div style="padding-top:100px;">
	<#if runningScheduleJobList?exists && runningScheduleJobList?size gt 0 >
	<table id="table1" style="border-collapse: collapse" borderColor="#000000" cellSpacing="0" width="1000" align="center" bgColor="#ffffff" border="1">
	    <tr>
			<td bgcolor="#999999" colspan="7">
			    <div align="center"><font color="#ffffff"><b>定时任务列表</b></font></div>
			</td>
		</tr>
		<tr>
		    <td align="middle">任务id</td>
		    <td align="middle">任务名称</td>
		    <td align="middle">任务分组</td>
		    <td align="middle">任务状态</td>
		    <td align="middle">任务运行时间表达式</td>
		    <td align="middle">任务描述</td>
		    <td align="middle">操作</td>
		</tr>
		<#list runningScheduleJobList as schedule>
		<tr>
		    <td align="middle">${(schedule.jobId)?default('')}</td>
		    <td align="middle">${(schedule.jobName)?default('')}</td>
		    <td align="middle">${(schedule.jobGroup)?default('')}</td>
		    <td align="middle">
			    <#if (schedule.jobStatus)?exists && schedule.jobStatus == "NORMAL">
			              正常状态
			    <#elseif (schedule.jobStatus)?exists && schedule.jobStatus == "PAUSED">  
			              暂停状态  
			    <#elseif (schedule.jobStatus)?exists && schedule.jobStatus == "COMPLETE">  
			              触发器完成，但是任务可能还正在执行中           
			    <#elseif (schedule.jobStatus)?exists && schedule.jobStatus == "BLOCKED">  
			             线程阻塞状态
			    <#elseif (schedule.jobStatus)?exists && schedule.jobStatus == "ERROR">  
			             出现错误
			    <#else>
		                        删除 
			    </#if>
		    </td>
		    <td align="middle">
		        <span class="spanOne${(schedule_index)?default('')}">${(schedule.cronExpression)?default('')}</span>
		    </td>
		    <td align="middle">${(schedule.jobDesc)?default('')}</td>
		    <td align="middle">
		      <#if (schedule.jobStatus)?exists && schedule.jobStatus == "NORMAL">
		        <a href="javascript:void(0);" title="暂停" class="pause" param="${(schedule.jobName)?default('')}" param1="${(schedule.jobGroup)?default('')}">暂停</a>
			  <#elseif (schedule.jobStatus)?exists && schedule.jobStatus == "PAUSED">  
		        <a href="javascript:void(0);" title="恢复" class="recover" param="${(schedule.jobName)?default('')}" param1="${(schedule.jobGroup)?default('')}">恢复</a>
			  </#if>
		        <a href="javascript:void(0);" title="删除" class="delete" param="${(schedule.jobName)?default('')}" param1="${(schedule.jobGroup)?default('')}">删除</a>
		        <a href="javascript:void(0);" title="启动一次" class="runOnce" param="${(schedule.jobName)?default('')}" param1="${(schedule.jobGroup)?default('')}">启动一次</a>
		        <a href="javascript:void(0);" title="修改执行时间" class="editExpression" param="${(schedule.jobName)?default('')}" param1="${(schedule.jobGroup)?default('')}" param2="${(schedule_index)?default('')}" param3="${(schedule.cronExpression)?default('')}">修改执行时间</a>
		    </td>
		</tr>
		</#list>
	</table>
	</#if>
</div>
</body>
</html>