引言：
当我们利用html标记表签语言制作出一张普通的信息表格时，为了摆脱单调，提高用户体验，我们可以为其添加各种动态效果，以满足用户在操作表格时所带来的效果乐趣。
内容概括：当鼠标移动到表格上的相关单元行时，其相关行的背景色改变【颜色自定义】，并且单元行背景色的改变会根据表格行的奇偶性来改变，从而产生背景色变换的效果。
代码详情：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="卡布奇诺奶茶的独特">
<meta name="Keywords" content="表格奇偶数行，奇偶数行背景色，奇偶数">
<meta name="Description" content="这里将演示js控制html表格中奇偶数行的背景色，由鼠标事件来触发。">
<title>JS控制表格奇偶数行背景色变换</title>
</head>
<style type="text/css">
#table001{
/*表格宽度*/
width:56%;
/*表格居中*/
margin:0 auto;
/*表格文本居中*/
text-align:center;
/*表格文本类型*/
font-family:微软雅黑;
/*表格内的大写英文字母全部转换为小写字母*/
text-transform:lowercase;
/*合并单元格*/
border-collapse:collapse;
}
</style>
<script type="text/javascript" language="javascript">
//当鼠标覆盖到相关单元格时所触发的事件
function changeOver(elementId){
//声明指定相关表元素
var table001 = document.getElementById("table001").children[0];
//for循环语句
for(i=0;i<table001.children.length;i++){
//if判断语句
if(table001.children[i]==elementId){
//奇数行
if(i%2==1)
//当鼠标覆盖到表格奇数行时，相关单元格背景色变为#CCCCCC色
elementId.style.background="#CCCCCC";
//偶数行
else
//当鼠标覆盖到表格偶数数行时，相关单元格背景色变为#F2F2F2色
elementId.style.background="#F2F2F2";
}
}
}
//当鼠标离开相关单元格时所触发的事件
function changeOut(elementId){
//当鼠标离开相关表格相关行时，其相关行背景色变为#FFFFFF色
elementId.style.background="#FFFFFF";
}
</script>
<body>
<!--table001-->
<table id="table001" border="1">
<tr style="background:#F2F2F2;">
<td>部门</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>职位</td>
<td>薪资</td>
</tr>
<tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
<tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
<tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
<tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
<tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
<tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</table>
</body>
</html>
---------------------------------
