JavaScript 點選表格行實現背景變色
如果表格行較多,可能會造成錯覺,由此導致失誤。
所以會採用隔行變色或者點選(滑鼠懸浮也是常用的)行實現變色效果。
下面就通過程式碼例項介紹一下如何實現此效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script type="text/javascript"> window.onload=function(){ var item=document.getElementById("tb"); var tbody=item.getElementsByTagName("tbody")[0]; var trs=tbody.getElementsByTagName("tr"); var obj=null; var bgColor=null; for(var i=0;i<trs.length;i++){ if(i%2==0){ trs[i].style.backgroundColor="green"; } trs.onclick=function(){ if(obj!=null){obj.style.backgroundColor=bgColor;} bgColor=this.style.backgroundColor; obj=this; this.style.backgroundColor="red"; } } } </script> </head> <body> <table id="tb" border="1"> <tbody> <tr> <td>螞蟻部落一</td> <td>螞蟻部落二</td> <td>螞蟻部落三</td> </tr> <tr> <td>螞蟻部落一</td> <td>螞蟻部落二</td> <td>螞蟻部落三</td> </tr> <tr> <td>螞蟻部落一</td> <td>螞蟻部落二</td> <td>螞蟻部落三</td> </tr> <tr> <td>螞蟻部落一</td> <td>螞蟻部落二</td> <td>螞蟻部落三</td> </tr> <tr> <td>螞蟻部落一</td> <td>螞蟻部落二</td> <td>螞蟻部落三</td> </tr> <tr> <td>螞蟻部落一</td> <td>第一行</td> <td>第一行</td> </tr> </tbody> </table> </body> </html>
表格不但實現了隔行變色的功能,而且當點選行的時候,能夠實現當前行背景變色效果。
一.程式碼註釋:
(1).window.onload=function(){},文件內容完全載入完畢再去執行函式中的程式碼。
(2).var item=document.getElementById("tb"),獲取表格物件。
(3). var tbody=item.getElementsByTagName("tbody")[0],獲取tbody元素。
(4).var trs=tbody.getElementsByTagName("tr"),獲取表格行物件集合。
(5).var obj=null,宣告一個變數並賦值為null,用來儲存表格行物件的引用。
(6).var bgColor=null,宣告一個變數並賦值為null,用來儲存表格行物件的背景色。
(7).for(var i=0;i<trs.length;i++){},通過for迴圈遍歷每一個行物件。
(8).if(i%2==0){trs.style.backgroundColor="green";} ,將奇數行的背景色設定為綠色。
(9).trs.onclick=function(){},為每一個行註冊onclick事件處理函式。
(10).if(obj!=null){obj.style.backgroundColor=bgColor;},如果obj不等於null的時候,也就是不是第一次點選行的時候,將obj的背景顏色設定為bgColor。這裡的目的就是將上一個點選行的背景顏色還原。
(11).bgColor=this.style.backgroundColor,將當前行的背景色儲存在bgColor。
(12).obj=this,將當前行的索引儲存於obj中。
(13).this.style.backgroundColor="red",將當前行的背景顏色設定為紅色。
二.相關閱讀:
(1).getElementsByTagName()參閱document.getElementsByTagName()一章節。
(2).this參閱JavaScript this 用法一章節。
相關文章
- js實現的點選表格行實現背景變色程式碼JS
- 用javascript/css實現GridView行背景色交替、點選行變色JavaScriptCSSView
- jQuery實現的滑鼠懸浮和選中實現表格行背景變色效果jQuery
- 實現滑鼠懸浮table表格行背景變色效果
- 滑鼠滑過實現table表格行背景變色程式碼例項
- 表格行背景交替變色例項程式碼
- 選中和取消選中核取方塊實現背景變色和取消變色
- JavaScript元素點選背景顏色切換JavaScript
- js實現點選導航欄使當前背景變色程式碼JS
- 點選當前文字行實現文字變色效果
- JavaScript點選按鈕切換背景顏色JavaScript
- JavaScript 表格隔行變色效果JavaScript
- js實現的點選連結<a>實現切換背景顏色JS
- JavaScript實用的表格行滑鼠點選高亮效果JavaScript
- JavaScript點選設定背景顏色的選項卡程式碼JavaScript
- 點選按鈕實現切換頁面背景顏色效果
- 表格奇偶行不同背景顏色程式碼
- JavaScript 背景顏色隨機變化JavaScript隨機
- JavaScript單擊變色再次點選還原JavaScript
- 頁面表格怎麼實現隔行異色、隔行變色
- input文字框焦點背景變色
- js實現的表格隔行變色和滑鼠懸浮變色程式碼JS
- javascript網頁背景顏色漸變效果JavaScript網頁
- 滑鼠懸浮實現連結背景變色效果
- jQuery table表格奇偶行變色效果jQuery
- js點選當前td單元格背景變色效果詳解JS
- Flutter 實現“斑馬紋”背景(需要變換顏色)Flutter
- 滑鼠滑過連結a實現背景變色程式碼
- 滑鼠懸浮背景變色導航選單
- js點選當前連結背景變色其他連結恢復原來背景色JS
- CSS滑鼠懸浮行背景變色效果CSS
- 短視訊平臺原始碼,點選ul/li改變背景顏色原始碼
- 滑鼠懸浮表格行變色程式碼
- js實現li元素隔行背景變色例項程式碼JS
- CSS實現的滑鼠懸浮整行背景變色程式碼CSS
- CSS 表格隔行變色CSS
- jQuery表格隔行變色jQuery
- excel重複項篩選標色 excel表格重複項變色Excel