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

最新推荐文章于 2022-03-26 18:03:55 发布
原创 最新推荐文章于 2022-03-26 18:03:55 发布 · 764 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#行交替颜色 #鼠标移动到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>
iteye_3851
关注
JQuery实现table隔行变色及鼠标滑动变色
态度决定思路，思路决定出路！！！
09-22 2337
1.实例： jquey实现表格隔行变色及鼠标滑过变色.html $(function(){ //添加tr基数背景色样式 $("#title tr:even").css("background","#999"); //even:设置tr基数背景色 $("#title tr:even"
当鼠标移到单元格(tr、td)背景变色 多种解决方案
zhouzilong502086525的专栏
03-23 1万+
第一种：td单元格变色，只用简单的js代码即可实现。很简洁的代码，点击即可运行该代码<br /><body><br /><table border="1px"><br /> <tr><br />  <th id="id_item1" onmouseover="this.bgColor='green'" onmouseout="this.bgColor=''">Menu Item1</th><br /> </tr><br /> <tr><br />  <th>Menu Item2</th><br /> </t
jsp中鼠标移动tr变色
02-19
对于一些童鞋 在jsp中困然的鼠标移动变色的问题 如果底色没有设置的话鼠标移动时间可以解决但是由的设置了底色让人很头疼所以给写个解决方案 如果好用请给个好评谢谢
[转]Table交替行变色 鼠标经过变色　单击变色
weixin_30307921的博客
05-27 151
最近做项目用到Repeater,没有好的样式只能套一个Table来设置交替行颜色、鼠标经过颜色、单击颜色，网上艘了一下资料整理了一下，具体的效果如下， 　　前台的Html代码如下： <%@ Page Title="" Language="C#" MasterPageFile="~/SystemBase/MainMasterPage.master" AutoE...
基于Table的企业级CSS样式、隔行换色、鼠标移动、单击换色
The 优快云 Blog With Matol Poet !
12-09 1439
即时数据展示 <!-- body { margin: 0px; padding: 0px; background: #f7f7f7; background-repeat: repeat-x; background-color: #FFFFFF; height:100%; } td, div, body { colo
tr td 移动变色
weixin_30394633的博客
04-09 131
jsp <table id="tableList" class="table table-hover"></table> css .table-hover > tbody > tr:hover > td,.table-hover > tbody > tr:hover > th { background-color: blue;...
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
10-26
有时为了提高用户体验，开发者会添加一些动态的交互效果，比如表格的行颜色交替变化，以及鼠标悬停或点击时的颜色变化。以下内容将详细介绍如何使用jQuery来实现这些效果，并提供相关的HTML代码和jQuery脚本。 ####...
当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同
09-25
10. 样式重置：在代码的注释部分提到了“设置鼠标经过颜色的变化”以及“设置奇偶行颜色的交替”，这表明了在实际开发中，可能会涉及到CSS的重置（resetting）或归一化（normalizing）技巧，即消除不同浏览器间的...
实现表格奇偶行颜色交替的jQuery插件
要实现表格的奇偶行颜色交替，可以使用CSS选择器来为奇数和偶数行定义不同的样式规则。例如，利用`:nth-child`选择器可以很容易地选中奇数行或偶数行： ```css tr:nth-child(odd) { background-color: #f2f2f2; /*...
一个简单但常用的javascript表格样式_鼠标划过行变色 简洁实现
10-30
常见的手段包括交替行颜色显示（也称为斑马线效果），以及鼠标悬停行变色。这两种方法能够帮助用户更容易区分不同的行，减少误操作的可能性。 ### 交替行颜色显示（斑马线效果） 交替行颜色显示，即表格的奇数行和...
table 隔列(行)换色效果让表格结构更清淅
12-04
当用户鼠标悬停在某个单元格上时，其背景色会变为白色，移开后恢复原色。 此外，`[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]`这部分可能是指在编辑器或演示环境中，如果需要引入JavaScript来实现动态效果（如...
表格隔行变色效果
m_0_1_0_1的博客
03-26 521
思路：首先将表格写出，再为其添加js效果。把表头放到thead中，把表身放到tbody中，这样可以区分开来实现效果。始终要遵守事件三要素，获取元素，然后利用循环绑定注册事件。 鼠标经过事件：onmouseover 鼠标离开事件：onmouseout <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-C.
鼠标单击TR实现行变色效果，再次单击恢复原色
lscbfntxgt的博客
09-27 959
鼠标单击TR实现行变色效果，再次单击恢复原色  个人摸索出来的，先来张效果图： 一，javaScript 代码部分（注意传参问题） /* 知识点5：单击某TR依照条件来变色（多参数传递方式） 知识点6：如何取标签的属性，内容等 如：tab.style.backgroundColor(取颜色) */ //单击某TR变色 function do_o
table tr隔行变色
王燕欣的博客
05-21 2785
$("tbody的class名  tr:odd").addClass("color1"); 双行  $("tbody的class名  tr:even").addClass("color2");单行 自己写color1和color2的样式就可以了
HTML tr隔行变色
遗声落西秦
12-18 3408
.box .bg tr:nth-child(1){ background: #999999; } .box .bg tr:nth-child(2n){ background: #eeeeee; } 中
HTML中实现鼠标经停整行(tr)变色
热门推荐
ljgllxyz的专栏
08-17 2万+
在网页制作的过程中有时候要实现那种在鼠标经过一个表格的某一行的时候，要整行的背景颜色发生变化，以表明该行正中焦点，网上有一大堆这方面的代码，但是好多都还要加上一大堆得javascript代码，本人再次自己写了个简单实用的小代码 1.首先在之前插入这么一段代码 tr.change:hover { background-color:#00FF00 } 然后再要变色的表格处的标签
JavaScript实现原生table元素鼠标移动到tr上，行变背景色
happy81997的博客
08-11 581
JavaScript实现原生table元素鼠标移动到tr上，行变背景色 代码： trbgColorChange () { const self = this; var oObj = event.srcElement; if (self.currentTr) { self.currentTr.style.backgroundColor = "#FFF"; } if (oObj.tagName.toLowerCase() == "
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值