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

2012/10/30 15:45:24作者：佚名来源：网络

移动端

【实例名称】

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调色技巧：浅色淡雅美女照片美化

热门软件/ 推荐游戏/ 手机软件

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

资讯分类

推荐教程

精品软件推荐