软件学堂

网游分类软件分类

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>

【运行效果】

运行效果

【难点剖析】

本例中如果要在JavaScriot中获取表格.必须为表格指定“id”或“name”属性。获取鼠标所指元素是使用“evenLsrcElement”,获取元素后由其“id”判断它是否为指定的表格,如果是,则使用“style”属性修改元素的边框颜色和背景颜色。

【源码下载】

如果你不愿复制代码及提高代码准确性,你可以点击:表格选中后变色 进行本实例源码下载 

上一篇:Win8游戏不能全屏怎么办
下一篇:PS调色技巧:浅色淡雅美女照片美化

相关文章