JavaScript 點選表格行實現背景變色

antzone發表於2019-07-04

如果表格行較多,可能會造成錯覺,由此導致失誤。

所以會採用隔行變色或者點選(滑鼠懸浮也是常用的)行實現變色效果。

下面就通過程式碼例項介紹一下如何實現此效果。

程式碼例項如下:

[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 用法一章節。

相關文章