隔行换色并且鼠标指向行变色的表格

一 应用

对于一些清单型数据，通常是利用表格展示到页面中。如果数据比较多，很容易看串行。这时，可以为表格添加隔行换色并且鼠标指向行变色功能。

 

二 代码

<script language="javascript" src="JS/jquery-3.1.1.min.js"></script>
<style type="text/css">
table{ border:0;border-collapse:collapse;}                /*设置表格整体样式*/
td{font:normal 12px/17px Arial;padding:2px;width:100px;}  /*设置单元格的样式*/
 
th{  /*设置表头的样式*/
      font:bold 12px/17px Arial;
      text-align:left;
      padding:4px;
      border-bottom:1px solid #333;
}
.odd{background:#cef;}       /*设置奇数行样式*/
.even{background:#ffc;}      /*设置偶数行样式*/
.light{background:#00A1DA;}  /*设置鼠标移到行的样式*/
</style>
<table>
  <thead>
    <tr>
      <th>产品名称</th>
      <th>产地</th>
      <th>厂商</th>
    </tr>
  </thead>
  <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>	
  </tbody>
</table>
<script type="text/javascript">
$(document).ready(function(){
  $("tbody tr:even").addClass("odd");                    //为偶数行添加样式
  $("tbody tr:odd").addClass("even");                     //为奇数行添加样式
  $("tbody tr").hover(                                   //为表格主体每行绑定hover方法
        function() {$(this).addClass("light");},
        function() {$(this).removeClass("light");}
  );
});
</script>

 

 

三 运行效果

 

 

四 运行说明

:even用于获取索引值为偶数的元素，:odd用于获取索引值为奇数的元素。