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

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

---

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 οnmοuseοut="mOut(this,'');" οnmοuseοver="mOver(this,'CCCCCC');">
        <td>NHP005</td>
        <td>100.23</td>
        <td>In Stock</td>
    </tr>
    <tr οnmοuseοut="mOut(this,'');" οnmοuseοver="mOver(this,'CCCCCC');">
        <td>DOY002</td>
        <td>21.32</td>
        <td>In Stock</td>
    </tr>
    <tr οnmοuseοut="mOut(this,'');" οnmοuseοver="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>