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

本文要实现下面的效果，即: 鼠标移到表格,表格行背景色会改变。

---

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