js兑现隔行变色操作鼠标经过效果
日期：2014-05-16 浏览次数：20367 次
js实现隔行变色操作鼠标经过效果
js实现隔行变色操作鼠标经过效果，下面是javascript代码
下面是css代码
下面是完整代码：
js实现隔行变色操作鼠标经过效果，下面是javascript代码
<script type="text/javascript">
/**隔行变色**/
function changColor()
{
var table_Element = document.getElementById("table_style");
var tr_Element = table_Element.rows;
for(var i=0;i<tr_Element.length;i++)
{
if(i%2==0)
{
tr_Element[i].className = "tr_style_1";
}else
{
tr_Element[i].className = "tr_style_2";
}
}
}
/**鼠标经过的效果**/
function tr_color()
{
var table_Element = document.getElementById("table_style");
var tr_Element = table_Element.rows;
for(var i=0;i<tr_Element.length;i++)
{
tr_Element[i].old_class = tr_Element[i].className; //先让这个类old_class属性记住它以前的样式
tr_Element[i].onmousemove = function ()
{
this.className = "tr_style";
}
tr_Element[i].onmouseout = function ()
{
this.className = this.old_class; //当鼠标移开之后还原以前的样式
}
}
}
/**当页面加载时执行**/
window.onload = function (){
changColor();
tr_color();
}
</script>
下面是css代码
<style type="text/css">
/**隔行变色样式**/
.tr_style_1 { background-color:#00FFCC;}
.tr_style_2 { background-color:#FFFF00;}
/**鼠标经过样式**/
.tr_style { background-color:#00FF00; color:#FFFFFF;}
</style>下面是完整代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js实现隔行变色操作鼠标经过效果</title>
<style type="text/css">
/**隔行变色样式**/
.tr_style_1 { background-color:#00FFCC;}
.tr_style_2 { background-color:#FFFF00;}
/**鼠标经过样式**/
.tr_style { background-color:#00FF00; color:#FFFFFF;}
</style>
<script type="text/javascript">
/**隔行变色**/
function changColor()
{
var table_Element = document.getElementById("table_style");
var tr_Element = table_Element.rows;
for(var i=0;i<tr_Element.length;i++)
{
if(i%2==0)
{
tr_Element[i].className = "tr_style_1";
}else
{
tr_Element[i].className = "tr_style_2";
}
}
}
/**鼠标经过的效果**/
function tr_color()
{
var table_Element = document.getElementById("table_style");
var tr_Element = table_Element.rows;
for(var i=0;i<tr_Element.length;i++)
{
tr_Element[i].old_class = tr_Element[i].className; //先让这个类old_class属性记住它以前的样式
tr_Element[i].onmousemove = function ()
{
this.className = "tr_style";
}
tr_Element[i].onmouseout = function ()
{
this.className = this.old_class; //当鼠标移开之后还原以前的样式
}
}
}
/**当页面加载时执行**/
window.onload = function (){
changColor();
tr_color();
}
</script>
</head>
<body>
<table border="1" width="200" height="150" id="table_style" cellpadding="0" cellspacing="0">
<tr>
<td>中国</td>
<td>中国</td>
<td>中国</td>
</tr>
<tr>
<td>美国</td>
<td>美国</td>
<td>美国</td>
</tr>
<tr>
<td>俄罗斯</td>
<td>俄罗斯</td>
<td>俄罗斯</td>
</tr>
<tr>
<td>日本</td>
<td>日本</td>
<td>日本</td>
</tr>
<tr>
<td>新加坡</td>
<td>新加坡</td>
<td>新加坡</td>
</tr>
</table>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
