<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>