js实现隔行变色操作鼠标经过效果

最新推荐文章于 2019-11-08 22:02:25 发布

yuxing198812

最新推荐文章于 2019-11-08 22:02:25 发布

阅读量130

点赞数

文章标签： JavaScript CSS XHTML HTML ViewUI

本文链接：https://blog.csdn.net/yuxing198812/article/details/83948901

版权

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>