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

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

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

移動端

【實例名稱】

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

【實例描述】

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

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>無標題頁-學無憂（denvermotorcycleaccidentlawyer.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");
   }
  }
 }
    //鼠標移走后，將顏色設(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>鼠標移動</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代碼  表格  變色