JS代码实现表格选中后变色

2012-10-30 来源：网络

【实例名称】

JS代码实现表格选中后变色

【实例描述】

在用户浏览表格时，为了突出显示表格内容，表格颜色会在鼠标移动到表格时发生变化本例介绍如何使表格的颜色发生变化。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页-学无忧（www.xue51.com）</title>
<script language="javascript">
    var searchResult=new Array();//鼠标滑过时显示背景色
    //改变背景色和边框颜色的方法
 function colorChange(table,color,color2)
 {
  table.style.borderColor=color;
  table.style.backgroundColor=color2;
 }
 //鼠标移动过来后，更改颜色
 function colorChange_on(e)
 {
  if (document.all)
   source1=event.srcElement
  else if (document.getElementById)
   source1=e.target;
  if (source1.id=="mytable"){
   colorChange(source1,"#999999","#F8F8F6");
  }
  else{
   while(source1.tagName!="TABLE")
   {
    source1=document.getElementById? 
source1.parentNode : source1.parentElement;
    if (source1.id=="mytable")
     colorChange(source1,"#999999","#F8F8F6");
   }
  }
 }
    //鼠标移走后，将颜色设置为白色
 function colorChange_off(e)
 {
  if (document.all)
   source2=event.srcElement
  else if (document.getElementById)
   source2=e.target
  if (source2.id=="mytable")
   colorChange(source2,"white","white")
  else{
   while(source2.tagName!="TABLE")
   {
    source2=document.getElementById? 
source2.parentNode : source2.parentElement
    if (source2.id=="mytable")
     colorChange(source2,"white","white")
   }
  }
 }   
</script>
需要在body中添加表格，并调用上面的方法，代码如下所示：
</head>
<body>
  <table width="80%" border="0" 
onMouseOver="colorChange_on(event)" 
onMouseOut="colorChange_off(event)" id="mytable" >
    <TR>
     <TD>鼠标移动</TD>
     <TD>鼠标移动</TD>
    </TR>
    <TR>
     <TD>鼠标移动</TD>
     <TD>鼠标移动</TD>
    </TR>
    <TR>
     <TD>鼠标移动</TD>
     <TD>鼠标移动</TD>
    </TR>
    <TR>
     <TD>鼠标移动</TD>
     <TD>鼠标移动</TD>
    </TR>
</table>
</body>
</html>

【运行效果】

运行效果