滑鼠滑過實現table表格行背景變色程式碼例項

admin發表於2017-03-23

如果表格的行數過多的話，可能會影響使用者對於行與行之間的分辨，於是也就容易出現失誤，所以現在有比較常見的幾種措施可以有效的緩解此問題，第一個就是各行變色，第二個就是滑鼠滑過能夠實現當前行背景變色效果，下面就是一段這樣的例項程式碼，大家可以借鑑一下，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.body_div{
  font-size:12px;
  background-color:#CCCCCC;
}
.tr_odd{
  background-color:orange;
}
.tr_even{
  background-color:aqua;
}
.mouse_color{
  background-color:green;
}
#tab{
  border:1px #FF0000 solid;
  text-align:center;
  width:100%;
  height:100%;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#tab tr:odd").find("td").addClass("tr_odd"); 
  $("#tab tr:even").find("td").addClass("tr_even"); 
  $("#tab tr").mouseover(function(){ 
    $(this).find("td").addClass("mouse_color"); 
  });
  $("#tab tr").mouseout(function(){ 
    $(this).find("td").removeClass("mouse_color"); 
  });
}) 
</script>
</head>
<body>
<body class="html_body">
<div class="body_div">
  <table id="tab">
    <tr style="background:#000000;color:#FFFFFF;font-weight:bolder;">
      <th>工號</th>
      <th>姓名</th>
      <th>年齡</th>
      <th>性別</th>
    </tr>
    <tr>
      <td>2014010101</td>
      <td>張峰</td>
      <td>56</td>
      <td>男</td>
    </tr>
    <tr>
      <td>2014010102</td>
      <td>李玉</td>
      <td>42</td>
      <td>女</td>
    </tr>
    <tr>
      <td>2014010103</td>
      <td>王珂</td>
      <td>36</td>
      <td>男</td>
    </tr>
    <tr>
      <td>2014010104</td>
      <td>張鈺</td>
      <td>31</td>
      <td>女</td>
    </tr>
    <tr>
      <td>2014010105</td>
      <td>朱顧</td>
      <td>44</td>
      <td>男</td>
    </tr>
    <tr>
      <td>2014010106</td>
      <td>胡雨</td>
      <td>35</td>
      <td>女</td>
    </tr>
    <tr>
      <td>2014010107</td>
      <td>劉希</td>
      <td>30</td>
      <td>男</td>
    </tr>
    <tr>
      <td>2014010108</td>
      <td>孫宇</td>
      <td>45</td>
      <td>女</td>
    </tr>
    <tr>
      <td>2014010109</td>
      <td>穀雨</td>
      <td>33</td>
      <td>男</td>
    </tr>
    <tr>
      <td>2014010110</td>
      <td>科宇</td>
      <td>45</td>
      <td>女</td>
    </tr>
  </table>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，具隔行變色和滑鼠滑過背景變色效果，程式碼比較簡單，下面介紹一下實現過程。

一.程式碼註釋:

1.$(document).ready(function(){}），當文件結構載入完畢再去執行函式中的程式碼。

2.$("#tab tr: odd").find("td").addClass("tr_odd")，將表格行集合中索引為奇數的行下面的單元格新增樣式類tr_odd，因為索引是從零開始的，所以就是設定偶數行的背景顏色。

3.$("#tab tr:even").find("td").addClass("tr_even")，和上面同樣的道理，設定奇數行的背景顏色。

4.$("#tab tr").mouseover(function(){})，為行註冊mouseover事件處理函式。

5.$(this).find("td").addClass("mouse_color")，為當前行的單元格新增樣式類mouse_color，也就是當滑鼠懸浮的時候設定單元格的背景顏色，也就是設定行的背景顏色。

6.$("#tab tr").mouseout(function(){})，為行註冊mouseout事件處理函式。

7.$(this).find("td").removeClass("mouse_color")，將當前行的mouse_color樣式類移除，也就是滑鼠離開的時候，使單元格的背景色恢復到預設。

二.相關閱讀:

1.: odd選擇器可以參閱jQuery :odd一章節。 

2.:even選擇器可以參閱jQuery :even一章節。

3.find()函式可以參閱jQuery find()一章節。

4.addClass()函式可以參閱jQuery addClass()一章節。  

5.mouseover事件可以參閱jQuery mouseover 事件一章節。 

6.mouseout事件可以參閱jQuery mouseout 事件一章節。 

7.removeClass()函式可以參閱jQuery removeClass()一章節。 

相關文章