怎的实现鼠标移到表格,表格行背景色就变

怎样实现鼠标移到表格,表格行背景色就变？
本文要实现下面的效果，即: 鼠标移到表格,表格行背景色会改变。??? ??? ??? Product Code??? ??? Price??? ??? Balance??? ??? ??? ???NHP005??? ???100.23??? ???In Stock??? ??? ??? ???DOY002??? ???21.32??? ???In Stock??? ??? ??? ???DCN001??? ???36.5??? ???Out of Stock???
下面介绍三种实现方法:

第一种: IE 支持，FireFox 不支持; 优点是代码简洁，节省空间; 缺点是表头（即表格第一行的颜色也会变化，这不是我所期望的）的背景色也会因鼠标滑过而改变。(适用于页面上只有一个表格，如果页面上有多个表格则会乱套。)

<style type="text/css">
tr{background-color:#FFFFFF; cursor:default}
.trOver{background-color:#CCCCCC; cursor:default}
.trOut{background-color:#FFFFFF; cursor:default}
</style>

<script language="javascript">
function document.onmouseover(){?
??? set(event.srcElement,"trOver")?
}?
??
function document.onmouseout(){?
??? set(event.srcElement,"trOut")?
}?
??
function set(obj,ClassName){?
??? if(!obj)return;?
??? if(obj.tagName=="TR") {
??? ??? obj.className=ClassName;
??? ??? return;
??? }else{
??? ??? set(obj.parentElement,ClassName);
??? }?
}
</script>

<table border="1" width="85%" align="center">
<tbody>
??? <tr align="left">
??? ??? <th>Product Code</th>
??? ??? <th>Price</th>
??? ??? <th>Balance</th>
??? </tr>
??? <tr>
??? ??? <td>NHP005</td>
??? ??? <td>100.23</td>
??? ??? <td>In Stock</td>
??? </tr>
??? <tr>
??? ??? <td>DOY002</td>
??? ??? <td>21.32</td>
??? ??? <td>In Stock</td>
??? </tr>
??? <tr>
??? ??? <td>DCN001</td>
??? ??? <td>36.5</td>
??? ??? <td>Out of Stock</td>
??? </tr>
</tbody>
</table>

第二种: IE支持，FireFox 不支持; 表头的背景色不会因鼠标滑过而改变; 缺点是代码繁多

<script language="javascript">
<!--
function mOver(src, cOver){
??? if(!src.contains(event.fromElement)){
??? ??? src.style.curse = "default";
??? ??? src.bgColor = cOver;
??? }
}

function mOut(src, cOut){
??? if(!src.contains(event.toElement)){
??? ??? src.style.curse = "default";
??? ??? src.bgColor = cOut;
??? }
}

//-->??
</script>???
?
<table border="1" width="85%" align="center">
<tbody>
??? <tr align="left">
??? ??? <th>Product Code</th>
??? ??? <th>Price</th>
??? ??? <th>Balance</th>
??? </tr>
??? <tr onmouseout="mOut(this,'');" onmouseover="mOver(this,'CCCCCC');">
??? ??? <td>NHP005</td>
??? ??? <td>100.23</td>
??? ??? <td>In Stock</td>
??? </tr>
??? <tr onmouseout="mOut(this,'');" onmouseover="mOver(this,'CCCCCC');">
??? ??? <td>DOY002</td>
??? ??? <td>21.32</td>
??? ??? <td>In Stock</td>
??? </tr>
??? <tr onmouseout="mOut(this,'');" onmouseover="mOver(this,'CCCCCC');">
??? ??? <td>DCN001</td>
??? ??? <td>36.5</td>
??? ??? <td>Out of Stock</td>
??? </tr>
</tbody>
</table>

第三种: IE 支持，FireFox 支持; 表头的背景色不会因鼠标滑过而改变; 缺点是代码繁多

<table border="1" width="85%" align="center">
<tbody>
??? <tr align="left">
??? ??? <th>Product Code</th>
??? ??? <th>Price</th>
??? ??? <th>Balance</th>
??? </tr>
??? <tr onMouseOut="this.bgColor=''" onMouseOver="this.bgColor='CCCCCC'">
??? ??? <td>NHP005</td>
??? ??? <td>100.23</td>
??? ??? <td>In Stock</td>
??? </tr>
??? <tr onMouseOut="this.bgColor=''" onMouseOver="this.bgColor='CCCCCC'">
??? ??? <td>DOY002</td>
??? ??? <td>21.32</td>
??? ??? <td>In Stock</td>
??? </tr>
??? <tr onMouseOut="this.bgColor=''" onMouseOver="this.bgColor='CCCCCC'">
??? ??? <td>DCN001</td>
??? ??? <td>36.5</td>
??? ??? <td>Out of Stock</td>
??? </tr>
</tbody>
</table>