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

antzone發表於2019-07-04
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 用法一章節。

相關文章