一 应用
对于一些清单型数据,通常是利用表格展示到页面中。如果数据比较多,很容易看串行。这时,可以为表格添加隔行换色并且鼠标指向行变色功能。
二 代码
<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用于获取索引值为奇数的元素。