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

一 应用

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

 

二 代码

Js代码  


<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用于获取索引值为奇数的元素。

之前部分原文：http://blog.csdn.net/itmyhome1990/article/details/30249579

一、隔行换色

[javascript] view
plain copy

$("tr:odd").css("background-color","#eeeeee");  

$("tr:even").css("background-color","#ffffff");  

或者一行搞定：

[javascript] view
plain copy

$("table tr:nth-child(odd)").css("background-color","#eeeeee");  

:nth-child 匹配其父元素下的第N个子或奇偶元素

二、鼠标经过变色

[javascript] view
plain copy

$("tr").live({  

    mouseover:function(){  

        $(this).css("background-color","#eeeeee");  

    },  

    mouseout:function(){  

        $(this).css("background-color","#ffffff");  

    }  

})  

或者

[javascript] view
plain copy

$("tr").bind("mouseover",function(){  

    $(this).css("background-color","#eeeeee");  

})  

$("tr").bind("mouseout",function(){  

    $(this).css("background-color","#ffffff");  

})  

当然live()和bind()都可以同时绑定多个事件或分开。

如果table表格是动态添加的 请参阅：http://blog.csdn.net/itmyhome1990/article/details/30245973

上面部分原文：http://cakin24.iteye.com/blog/2366747