上QQ阅读APP看书，第一时间看更新
4.10 综合实例：隔行换色鼠标指向表格并且行变色
对于一些清单型数据，通常是利用表格展示到页面中。如果数据比较多，很容易看串行。这时，可以为表格添加隔行换色并且鼠标指向行变色功能。下面就通过一个具体的例子来实现该功能。
【例4.14】隔行换色并且鼠标指向表格行变色。（实例位置：光盘\TM\sl\4\14）
本实例的需求主要有几下两点：
（1）在页面中创建一个表格，令表格奇数行显示黄色，偶数行显示浅蓝色。
（2）当鼠标指向某一行时，该行颜色随之改变。
运行本实例，将显示如图4.21所示的隔行换色的表格，将鼠标移动到表格体的各行时，该行将突出显示，如图4.22为将鼠标移动到倒数第2行时显示的效果。
图4.21 隔行换色的表格效果
图4.22 鼠标移到第3行时的效果
程序开发步骤如下：
（1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery库。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在页面的<body>标记中，添加一个5行3列的表格，并使用<thead>标记将表格的标题行括起来，再使用<tbody>标记将表格的其他行括起来，关键代码如下：
<table>
<thead>
<tr>
<th>产品名称</th>
<th>产地</th>
<th>厂商</th>
</tr>
</thead>
<tbody>
<tr>
<td>爱美电视机</td>
<td>福州</td>
<td>爱美电子</td>
</tr>
…… <!—此处省略了其他3行的代码-->
</tbody>
</table>
（3）编写CSS样式，用于控制表格整体样式、表头的样式、表格的单元格的样式，以及奇数行样式、偶数行样式和鼠标移到行的样式，具体代码如下：
<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>
（4）在引入jQuery库的代码下方编写jQuery代码，实现表格的隔行换色，并且让鼠标移到行变色的功能，具体代码如下：
<script type="text/javascript">
$(document).ready(function(){
$("tbody tr:odd").addClass("odd"); //为偶数行添加样式
$("tbody tr:even").addClass("even"); //为偶数行添加样式
$("tbody tr").hover( //为表格主体每行绑定hover方法
function() {$(this).addClass("light"); }，
function() {$(this).removeClass("light"); }
);
});
</script>
说明
$("tr:odd")和$("tr:even")选择器中索引是从0开始的，因此第一行是偶数行。