<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>
- 大小: 29.7 KB
分享到:
相关推荐
利用CSS控制表格table的交替颜色 代码和讲解部分
table鼠标经过时整行变色 jquerytable鼠标经过时整行变色 jquery
当你选中table中的某一行时,想改变这一行的背景色就可以测试此方法
用js实现 表格行的表格,上移 ,下移,置顶,置底操作 直接引入js 快捷方便 支持ctrl键同时选择多行操作 支持选中行改变样式 支持行号显示 支持未选择行时移动提示
当鼠标指向table表格某行的时候,行的底色将会改变~!
鼠标经过给tr换颜色</title> </head><body><table align=”center” width=”100%” border=”1″ cellspacing=”1″ cellpadding=”1″> <tr xss=removed xss=removed> ”center”>1
js控制鼠标经过改变table行列背景颜色
element ui el-table 动态改变 单元格 的颜色, 将el-table 包在自定义组件(page_table)里面,可以重复使用。
在layui的表格table中,选中某行数据之后更改本行颜色,取消选中后恢复原样式。在layui的表格table中,选中某行数据之后更改本行颜色,取消选中后恢复原样式。
js控制table的tr变色,非常实用,可控想变色的行,也可得到table中的任意td的值。
能够自定义tr的位置,便于排序操作,000000000
elementUI给table表头行设置背景颜色样式
当鼠标移到table行时会随着改变颜色,在视觉上有一定的辨别效果,下面有个不错的示例,大家不妨参考下
改版uni-table插件功能,新增单击行事件、单击某td事件、单独修改某td的字体颜色;选中行样式修改。主要修改文件uni-tr、uni-td;
下面小编就为大家带来一篇js实现table添加行tr、删除行tr、清空行tr的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
该代码为大家展示了table表格内容上下移动的三种实现方式,通俗易懂
在不知道table的ID的情况下。隐藏table里面的tr td
简单的table的table的上移 核心代码 使用的jqeury的实现的 连接后他可行 简单的table的table的上移 核心代码 使用的jqeury的实现的 连接后他可行简单的table的table的上移 核心代码 使用的jqeury的实现的 连接后他...
利用jquery实现table上下行移动互换,jquery库另行下载