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