當(dāng)前位置：軟件學(xué)堂 > 資訊首頁(yè) > 網(wǎng)絡(luò)編程 > 編程其他 > JS代碼實(shí)現(xiàn)表格選中后變色

JS代碼實(shí)現(xiàn)表格選中后變色

2012/10/30 15:45:24作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

JS代碼實(shí)現(xiàn)表格選中后變色

【實(shí)例描述】

在用戶瀏覽表格時(shí)，為了突出顯示表格內(nèi)容，表格顏色會(huì)在鼠標(biāo)移動(dòng)到表格時(shí)發(fā)生變化本例介紹如何使表格的顏色發(fā)生變化。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>無(wú)標(biāo)題頁(yè)-學(xué)無(wú)憂（yzddtk.cn）</title>
<script language="javascript">
    var searchResult=new Array();//鼠標(biāo)滑過(guò)時(shí)顯示背景色
    //改變背景色和邊框顏色的方法
 function colorChange(table,color,color2)
 {
  table.style.borderColor=color;
  table.style.backgroundColor=color2;
 }
 //鼠標(biāo)移動(dòng)過(guò)來(lái)后，更改顏色
 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");
   }
  }
 }
    //鼠標(biāo)移走后，將顏色設(shè)置為白色
 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中添加表格，并調(diào)用上面的方法，代碼如下所示：
</head>
<body>
  <table width="80%" border="0" 
onMouseOver="colorChange_on(event)" 
onMouseOut="colorChange_off(event)" id="mytable" >
    <TR>
     <TD>鼠標(biāo)移動(dòng)</TD>
     <TD>鼠標(biāo)移動(dòng)</TD>
    </TR>
    <TR>
     <TD>鼠標(biāo)移動(dòng)</TD>
     <TD>鼠標(biāo)移動(dòng)</TD>
    </TR>
    <TR>
     <TD>鼠標(biāo)移動(dòng)</TD>
     <TD>鼠標(biāo)移動(dòng)</TD>
    </TR>
    <TR>
     <TD>鼠標(biāo)移動(dòng)</TD>
     <TD>鼠標(biāo)移動(dòng)</TD>
    </TR>
</table>
</body>
</html>

【運(yùn)行效果】

運(yùn)行效果

【難點(diǎn)剖析】

本例中如果要在JavaScriot中獲取表格．必須為表格指定“id”或“name”屬性。獲取鼠標(biāo)所指元素是使用“evenLsrcElement”，獲取元素后由其“id”判斷它是否為指定的表格，如果是，則使用“style”屬性修改元素的邊框顏色和背景顏色。

【源碼下載】

如果你不愿復(fù)制代碼及提高代碼準(zhǔn)確性，你可以點(diǎn)擊：表格選中后變色 進(jìn)行本實(shí)例源碼下載 

標(biāo)簽： JS代碼  表格  變色