第一种：鼠标经过时table表格中的颜色根据奇偶行改变不同的颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function changeOver(elementId){
//声明指定相关表元素
var table1 = document.getElementById("table1").children[0];
//for循环语句
for(var i=0;i<table1.children.length;i++){
//if判断语句
if(table1.children[i]==elementId){
//奇数行
if(i%2==1)
//当鼠标覆盖到表格奇数行时，相关单元格背景色变为#CCCCCC色
elementId.style.background="red";
//偶数行
else
//当鼠标覆盖到表格偶数数行时，相关单元格背景色变为#F2F2F2色
elementId.style.background="green";
}
}
}
//当鼠标离开相关单元格时所触发的事件
function changeOut(elementId){
//当鼠标离开相关表格相关行时，其相关行背景色变为#FFFFFF色
elementId.style.background="#FFFFFF";
} </script>
<style type="text/css">
/*表格的样式*/
table{
width: 200px;
height: 400px;
border: 1px solid;
}
tr td{
width: 100px;
height: 50px;
border: 1px solid;
}
</style>
</head>
<body>
<!--onmouseover鼠标经过时触发的函数，onmouseout鼠标离开时触发的函数-->
<table id="table1" >
<tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">
<td >1</td>
</tr>
<tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">
<td>2</td>
</tr>
<tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">
<td>3</td>
</tr>
<tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">
<td>4</td>
</tr>
<tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">
<td>5</td>
</tr>
<tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">
<td>6</td>
</tr>
<tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">
<td>7</td>
</tr>
<tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">
<td>8</td>
</tr> </table>
</body>
</html>
第二种：直接用css发生改变，使用了伪类选择器nth-child
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*奇数改变的颜色*/
tr:nth-child(odd){background-color:#FFE4C4;}
/*偶数改变的颜色*/
tr:nth-child(even){background-color:#F0F0F0;}
/*table样式*/
table{
width: 200px;
height: 400px;
border: 1px solid;
}
/*tr.td的样式*/
tr td{
width: 100px;
height: 50px;
border: 1px solid;
}
</style>
</head>
<body>
<!--设计的一个简单表格-->
<table id="table1" >
<tr>
<td >1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr >
<td>6</td>
</tr>
<tr >
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr> </table>
</body>
</html>
