高效的表格行背景隔行变色及选定高亮的JS代码

这段JS放在head中

//点击当前选中行的时候设置当前行的颜色，同时恢复除当前行外的行的颜色及鼠标事件 
function selectRow(target) 
{ 
var sTable = document.getElementById("ServiceListTable") 
for(var i=1;i<sTable.rows.length;i++) //遍历除第一行外的所有行 
{ 
if (sTable.rows[i] != target) //判断是否当前选定行 
{ 
sTable.rows[i].bgColor = "#ffffff"; //设置背景色 
sTable.rows[i].onmouseover = resumeRowOver; //增加onmouseover 事件 
sTable.rows[i].onmouseout = resumeRowOut;//增加onmouseout 事件 
} 
else 
{ 
sTable.rows[i].bgColor = "#d3d3d3"; 
sTable.rows[i].onmouseover = ""; //去除鼠标事件 
sTable.rows[i].onmouseout = ""; //去除鼠标事件 
} 
} 
} 
//移过时tr的背景色 
function rowOver(target) 
{ 
target.bgColor='#e4e4e4'; 
} 
//移出时tr的背景色 
function rowOut(target) 
{ 
target.bgColor='#ffffff'; 
} 
//恢复tr的的onmouseover事件配套调用函数 
function resumeRowOver() 
{ 
rowOver(this); 
} 
//恢复tr的的onmouseout事件配套调用函数 
function resumeRowOut() 
{ 
rowOut(this); 
}

关于最后两个函数resumeRowOver和resumeRowOut为什么这样写参考我之前写的通过js给页面元素添加事件

对应的表格HTML

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="ServiceListTable"> 
<tr> 
<th>服务事项</th> 
<th>N</th> 
<th>状态</th> 
<th>办结</th> 
<th>资料</th> 
</tr> 
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> 
<td>相关内容</td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
</tr> 
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> 
<td>相关内容</td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
</tr> 
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> 
<td>相关内容</td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
</tr> 
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> 
<td>相关内容</td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
</tr> 
</table>