js實現的點選表格行實現背景變色程式碼

antzone發表於2017-03-17
JS

如果表格內容較多的話，可能會造成錯覺，由此可能會導致失誤，為了防止這種失誤的出現，一般會採用隔行變色或者點選（滑鼠懸浮也是常用的）行實現變色效果，下面就通過程式碼例項介紹一下如何實現此效果。

程式碼如下:

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

相關文章