- jQuery從入門到精通 （軟件開發視頻大講堂）
- 明日科技
- 692字
- 2020-11-28 23:47:24
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開始的，因此第一行是偶數行。
推薦閱讀
- Web應用系統開發實踐（C#）
- Python程序設計教程（第2版）
- Java面向對象軟件開發
- Dependency Injection in .NET Core 2.0
- GitLab Repository Management
- Python金融數據分析
- JavaScript+Vue+React全程實例
- TMS320LF240x芯片原理、設計及應用
- Learning Hadoop 2
- UI設計全書（全彩）
- 小程序從0到1：微信全棧工程師一本通
- AV1視頻編解碼標準：原理與算法實現
- Unity 2017 Game AI Programming（Third Edition）
- Visual C++從入門到精通（第2版）
- 趣學數據結構