<p>加上鼠标移到上面突出显示效果</p>

<table width="557" border="0" cellspacing="0" cellpadding="0" id="tb2">
  <tr id="tr1" onmouseover="changebg('tr1')" onmouseout="defaultbg('tr1')" class="trbg2">
　　<td align="center">1001</td>
　　<td align="center">Jim</td>
　　<td align="center">jim@msn.com</td>
　　<td align="center">jim@msn.com</td>
  </tr>
  <tr id="tr2" onmouseover="changebg('tr2')" onmouseout="defaultbg('tr2')" class="trbg1">
　　<td align="center">1002</td>
　　<td align="center">John</td>
　　<td align="center">john@hotmail.com</td>
　　<td align="center">john@hotmail.com</td>
  </tr>
  <tr id="tr3" onmouseover="changebg('tr3')"  onmouseout="defaultbg('tr3')" class="trbg2">
　　<td align="center">1003</td>
　　<td align="center">Lucy</td>
　　<td align="center">lucy@163.com</td>
　　<td align="center">lucy@hotmail.com</td>
  </tr>
  <tr id="tr4" onmouseover="changebg('tr4')" onmouseout="defaultbg('tr4')" class="trbg1">
　　<td align="center">1004</td>
　　<td align="center">Lily</td>
　　<td align="center">lily@sina.com.cn</td>
　　<td align="center">lily@hotmail.com</td>
  </tr>
  <tr id="tr5" onmouseover="changebg('tr5')" onmouseout="defaultbg('tr5')" class="trbg2">
　　<td align="center">1005</td>
　　<td align="center">Joyce</td>
　　<td align="center">Joyce@sohu.com</td>
　　<td align="center">Joyce@hotmail.com</td>
  </tr>
  <tr id="tr6" onmouseover="changebg('tr6')"  onmouseout="defaultbg('tr6')" class="trbg1">
　　<td align="center">1006</td>
　　<td align="center">Tom</td>
　　<td align="center">tom@21.cn</td>
　　<td align="center">tom@hotmail.com</td>
  </tr>
  <tr id="tr7" onmouseover="changebg('tr7')" onmouseout="defaultbg('tr7')" class="trbg2">
　　<td align="center">1007</td>
　　<td align="center">Kite</td>
　　<td align="center">kite@126.com</td>
　　<td align="center">kite@msn.com</td>
  </tr>
  <tr id="tr8" onmouseover="changebg('tr8')" onmouseout="defaultbg('tr8')" class="trbg1">
　　<td align="center">1008</td>
　　<td align="center">Marry</td>
　　<td align="center">marray@163.com</td>
　　<td align="center">marray@msn.com</td>
  </tr>
  <tr id="tr9" onmouseover="changebg('tr9')" onmouseout="defaultbg('tr9')" class="trbg2">
　　<td align="center">1009</td>
　　<td align="center">Sunny</td>
　　<td align="center">sunny@126.com</td>
　　<td align="center">sunny@msn.com</td>
  </tr>
  <tr id="tr10" onmouseover="changebg('tr10')" onmouseout="defaultbg('tr10')" class="trbg1">
　　<td align="center">1010</td>
　　<td align="center">Jogo</td>
　　<td align="center">jogo@sohu.com</td>
　　<td align="center">jogo@msn.com</td>
  </tr>
  <tr id="tr11" onmouseover="changebg('tr11')" onmouseout="defaultbg('tr11')" class="trbg2">
　　<td align="center">1011</td>
　　<td align="center">Parry</td>
　　<td align="center">parry@yahoo.com.cn</td>
　　<td align="center">parry@msn.com</td>
  </tr>
</table>
</body>
</html>

tb.setAttribute("class","trbg3 "+tb.getAttribute("class"))
tb.setAttribute("className","trbg3 "+tb.getAttribute("className"));

在上面两句代码中，一个用到了class, 另一个用到了className，class在FF下有效，className在IE下有效；如果只有其中一句的话，都会不兼容IE或FF，所以我们两句都写上；

注意： 在getAttribute时，我们要与setAttribute一致，在FF下，如果用getAttribute("className")将返回null值，这里之所以用样式叠加，是因为要完成突出效果，以避免鼠标移开时会移除原有样式