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