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

在表格菜单中，用JavaScript实现随着鼠标的滚动改变行的颜色

2012-12-05 18:01 756 查看
 先上个截图吧！看的更明白点 


 

首先要有表格：在html的body中写上如下代码：

其实就是一张表格，有14行，每行都有一个图片加上一个超级链接

 

<table width='100%' height='100%' border='1' cellspacing='0' cellpadding='1'><tr id='menu1'><td><a href='getnexttree.action?id=1' target='menuTree' onclick='changeColor(1)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/1.gif' />  我的流程</a></td></tr><tr id='menu2'><td><a href='getnexttree.action?id=2' target='menuTree' onclick='changeColor(2)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/2.gif' />  我的文档</a></td></tr><tr id='menu3'><td><a href='getnexttree.action?id=3' target='menuTree' onclick='changeColor(3)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/3.gif' />  我的通信</a></td></tr><tr id='menu4'><td><a href='getnexttree.action?id=4' target='menuTree' onclick='changeColor(4)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/4.gif' />  我的人事</a></td></tr><tr id='menu5'><td><a href='getnexttree.action?id=5' target='menuTree' onclick='changeColor(5)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/5.gif' />  我的任务</a></td></tr><tr id='menu6'><td><a href='getnexttree.action?id=6' target='menuTree' onclick='changeColor(6)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/6.gif' />  我的资产</a></td></tr><tr id='menu7'><td><a href='getnexttree.action?id=7' target='menuTree' onclick='changeColor(7)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/7.gif' />  我的会议</a></td></tr><tr id='menu8'><td><a href='getnexttree.action?id=8' target='menuTree' onclick='changeColor(8)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/8.gif' />  我的商务</a></td></tr><tr id='menu9'><td><a href='getnexttree.action?id=9' target='menuTree' onclick='changeColor(9)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/9.gif' />  我的助手</a></td></tr><tr id='menu10'><td><a href='getnexttree.action?id=10' target='menuTree' onclick='changeColor(10)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/10.gif' />  信息中心</a></td></tr><tr id='menu11'><td><a href='getnexttree.action?id=11' target='menuTree' onclick='changeColor(11)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/11.gif' />  系统管理</a></td></tr><tr id='menu12'><td><a href='getnexttree.action?id=12' target='menuTree' onclick='changeColor(12)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/12.gif' />  图形报表</a></td></tr><tr id='menu13'><td><a href='getnexttree.action?id=13' target='menuTree' onclick='changeColor(13)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/13.gif' />  我的协作</a></td></tr><tr id='menu14'><td><a href='getnexttree.action?id=14' target='menuTree' onclick='changeColor(14)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/14.gif' />  我的相册</a></td></tr></table>

 

然后再head中加上如下javascript代码： 

<script type="text/javascript" src="index_files/leftMenuFiles/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function() {
$("table tr").hover(function() {
$(this).css("background-color", "#B2E1F1");
}, function() {
$(this).css("background-color", "");
});
});

 

这里用到了jquery框架，所以要导入这个文件

 

然后当你的鼠标在这14行滚动时，就会使这一行的颜色改变成你想要的颜色，

当你的鼠标离开时，颜色也就消失了

 

还有一点，当你单击了某一行时，就算你的鼠标离开，这一行的也会显示一种颜色，这里我用的是同一种颜色，其代码如下：加在javascript中

function changeColor(a) {
for ( var i = 1; i <= 14; i++) {
document.getElementById("menu" + i).className = "Normal";
}
document.getElementById("menu" + a).className = "Current";
}


然后再写上一句CSS代码：

<style type="text/css">
.Normal{background:none;  /*没选择的不显示任何颜色*/}
.Current{background: #B2E1F1; /*选择了的显示某一种颜色*/}
</style>


其效果如下


 

注解：当鼠标停在上面时，其实都有应该有鼠标的手型在上面的，但是由于截图，就显示不了啦。 

整个页面的代码如下：(还有其他一些知识) 是JSP页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>一级菜单树</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="index_files/leftMenuFiles/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function() {
$("table tr").hover(function() {
$(this).css("background-color", "#B2E1F1");
}, function() {
$(this).css("background-color", "");
});
});
function changeColor(a) {
for ( var i = 1; i <= 14; i++) {
document.getElementById("menu" + i).className = "Normal";
}
document.getElementById("menu" + a).className = "Current";
}
</script>

<style type="text/css">
body{
MARGIN-TOP: 2px;
MARGIN-LEFT: 2px;
margin-right: 2px;
margin-bottom: 2px;
FONT-FAMILY: verdana;
FONT-SIZE: 14px;
}
table{
border-collapse:collapse;
}
tr{
background-color: #F0F5FF;
cursor: pointer;
FONT-FAMILY: verdana;
FONT-SIZE: 14px;
}
td{
PADDING-LEFT: 10px;
border:solid 1px #719BC3;
}
a{
color: black;
outline: none; /*去掉超级链接的虚线框*/
}
a:link,a:visited{ text-decoration:none;  /*超链接无下划线*/	}
a:hover{ text-decoration:underline;  /*鼠标放上去有下划线*/}
a:active {star:expression(this.onFocus=this.blur()); /*去掉超级链接的虚线框*/}

.Normal{background:none;}
.Current{background: #B2E1F1;}
</style>

</head>

<body>

<table width='100%' height='100%' border='1' cellspacing='0' cellpadding='1'><tr id='menu1'><td><a href='getnexttree.action?id=1' target='menuTree' onclick='changeColor(1)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/1.gif' />  我的流程</a></td></tr><tr id='menu2'><td><a href='getnexttree.action?id=2' target='menuTree' onclick='changeColor(2)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/2.gif' />  我的文档</a></td></tr><tr id='menu3'><td><a href='getnexttree.action?id=3' target='menuTree' onclick='changeColor(3)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/3.gif' />  我的通信</a></td></tr><tr id='menu4'><td><a href='getnexttree.action?id=4' target='menuTree' onclick='changeColor(4)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/4.gif' />  我的人事</a></td></tr><tr id='menu5'><td><a href='getnexttree.action?id=5' target='menuTree' onclick='changeColor(5)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/5.gif' />  我的任务</a></td></tr><tr id='menu6'><td><a href='getnexttree.action?id=6' target='menuTree' onclick='changeColor(6)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/6.gif' />  我的资产</a></td></tr><tr id='menu7'><td><a href='getnexttree.action?id=7' target='menuTree' onclick='changeColor(7)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/7.gif' />  我的会议</a></td></tr><tr id='menu8'><td><a href='getnexttree.action?id=8' target='menuTree' onclick='changeColor(8)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/8.gif' />  我的商务</a></td></tr><tr id='menu9'><td><a href='getnexttree.action?id=9' target='menuTree' onclick='changeColor(9)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/9.gif' />  我的助手</a></td></tr><tr id='menu10'><td><a href='getnexttree.action?id=10' target='menuTree' onclick='changeColor(10)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/10.gif' />  信息中心</a></td></tr><tr id='menu11'><td><a href='getnexttree.action?id=11' target='menuTree' onclick='changeColor(11)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/11.gif' />  系统管理</a></td></tr><tr id='menu12'><td><a href='getnexttree.action?id=12' target='menuTree' onclick='changeColor(12)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/12.gif' />  图形报表</a></td></tr><tr id='menu13'><td><a href='getnexttree.action?id=13' target='menuTree' onclick='changeColor(13)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/13.gif' />  我的协作</a></td></tr><tr id='menu14'><td><a href='getnexttree.action?id=14' target='menuTree' onclick='changeColor(14)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/14.gif' />  我的相册</a></td></tr></table>

</body>
</html>


 

 

 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  Javascript JQuery JSP 表格 鼠标停留
相关文章推荐
新的分享
章节导航