jQuery實現的滑鼠懸浮和選中實現表格行背景變色效果

admin發表於2017-03-12
jQuery

表格可以組織資料，這個自然不用說，如果資料量較大的話，可能會在視覺上產生一些混淆的感覺，所以為了提高辨識度，會為表格增加一些人性化的效果，比如各行變色，滑鼠懸浮和選中實現背景變色，下面就是一段這樣的程式碼。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.table-tr-title{
  height:26px;
  font-size:12px;
  text-align:center;
}
.table-tr-content{
  height:18px;
  background:#FFFFFF;
  text-align:center;
  font-size:12px;
}
.normalEvenTD{
  background:#DFD8D8;
}
.normalOddTD{
  background:#FFFFFF;
}
.hoverTD{
  background-color:#eafcd5;
  height:18px;
  text-align:center;
  font-size:12px;
}
.trSelected{
  background-color:#51b2f6;
  height:18px;
  text-align:center;
  font-size:12px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(function(){ 
  var dtSelector = ".list"; 
  var tbList = $(dtSelector); 
  tbList.each(function(){ 
    var self = this; 
    $("tr:even:not(:first)", $(self)).addClass("normalEvenTD");
    $("tr:odd", $(self)).addClass("normalOddTD");
    $("tr:not(:first)", $(self)).hover( 
      function () { $(this).addClass('hoverTD');$(this).removeClass('table-td-content'); }, 
      function () { $(this).removeClass('hoverTD');$(this).addClass('table-td-content'); } 
    ); 
 
    $("tr", $(self)).click(function (){ 
      var trThis = this; 
      $(self).find(".trSelected").removeClass('trSelected'); 
      if($(trThis).get(0) == $("tr:first", $(self)).get(0)){ 
        return; 
      } 
      $(trThis).addClass('trSelected'); 
    }); 
  }); 
}); 
</script>
</head>
<body>
<table width="99%" class="list" bgcolor="#c0de98">
  <tr class="table-tr-title">
    <td width="5%">標題</td>
    <td width="5%">標題</td>
    <td width="5%">標題</td>
    <td width="5%">標題</td>
  </tr>
  <tr class="table-tr-content">
    <td width="5%">資料</td>
    <td width="5%">資料</td>
    <td width="5%">資料</td>
    <td width="5%">資料</td>
  </tr>
  <tr class="table-tr-content">
    <td width="5%">資料</td>
    <td width="5%">資料</td>
    <td width="5%">資料</td>
    <td width="5%">資料</td>
  </tr>
  <tr class="table-tr-content">
    <td width="5%">資料</td>
    <td width="5%">資料</td>
    <td width="5%">資料</td>
    <td width="5%">資料</td>
  </tr>
  <tr class="table-tr-content">
    <td width="5%">資料</td>
    <td width="5%">資料</td>
    <td width="5%">資料</td>
    <td width="5%">資料</td>
  </tr>
  <tr class="table-tr-content">
    <td width="5%">資料</td>
    <td width="5%">資料</td>
    <td width="5%">資料</td>
    <td width="5%">資料</td>
  </tr>
  <tr class="table-tr-content">
    <td width="5%">資料</td>
    <td width="5%">資料</td>
    <td width="5%">資料</td>
    <td width="5%">資料</td>
  </tr>
  <tr class="table-tr-content">
    <td width="5%">資料</td>
    <td width="5%">資料</td>
    <td width="5%">資料</td>
    <td width="5%">資料</td>
  </tr>
  <tr class="table-tr-content">
    <td width="5%">資料</td>
    <td width="5%">資料</td>
    <td width="5%">資料</td>
    <td width="5%">資料</td>
  </tr>
  <tr class="table-tr-content">
    <td width="5%">資料</td>
    <td width="5%">資料</td>
    <td width="5%">資料</td>
    <td width="5%">資料</td>
  </tr>
  <tr class="table-tr-content">
    <td width="5%">資料</td>
    <td width="5%">資料</td>
    <td width="5%">資料</td>
    <td width="5%">資料</td>
  </tr>
  <tr class="table-tr-content">
    <td width="5%">資料</td>
    <td width="5%">資料</td>
    <td width="5%">資料</td>
    <td width="5%">資料</td>
  </tr>
  <tr class="table-tr-content">
    <td width="5%">資料</td>
    <td width="5%">資料</td>
    <td width="5%">資料</td>
    <td width="5%">資料</td>
  </tr>
</table>
</body>
</html>

相關文章