當前位置:蘿卜系統下載站 > 技術開發教程 > 詳細頁面

JS代碼完成表格選中后變色

JS代碼完成表格選中后變色

更新時間:2023-06-20 文章作者:未知 信息來源:網絡 閱讀次數:

編程(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”屬性修改元素的邊框顏色和背景顏色。

【源碼下載】

如果你不愿復制代碼及提高代碼準確性,你可以點擊:表格選中后變色 進行本實例源碼下載 


使用編程語言寫的程序,由于每條指令都對應計算機一個特定的基本動作,所以程序占用內存少、執行效率高。

溫馨提示:喜歡本站的話,請收藏一下本站!

本類教程下載

系統下載排行

網站地圖xml | 網站地圖html
亚洲嫩草影院久久精品