JS代码完成表格选中后变色|萝卜系统

编程（Programming）是编定程序的中文简称，就是让计算机代码解决某个问题，对某个计算体系规定一定的运算方式，使计算体系按照该计算方式运行，并最终得到相应结果的过程。为了使计算机能够理解（understand）人的意图，人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机，使得计算机能够根据人的指令一步一步去工作，完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。

【实例名称】

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”属性修改元素的边框颜色和背景颜色。

【源码下载】

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

使用编程语言写的程序，由于每条指令都对应计算机一个特定的基本动作，所以程序占用内存少、执行效率高。

……

标签:JS代码完成表格选中后变色