我們常常在設(shè)計(jì)網(wǎng)站或者是信息系統(tǒng)時(shí)，數(shù)據(jù)龐大而繁多，那么如何有效地在頁(yè)面中顯示數(shù)據(jù)，很大程度上決定了系統(tǒng)的人性化設(shè)計(jì)理念。
當(dāng)前數(shù)據(jù)顯示最為普遍的組織方式便是“表格”，表格在顯示多行時(shí)我們會(huì)將它“隔行變色”，提高用戶對(duì)數(shù)據(jù)的易操作性；并且對(duì)數(shù)據(jù)經(jīng)過(guò)的行設(shè)為為“高亮顯示”，方便用戶聚焦關(guān)注的數(shù)據(jù)。
實(shí)現(xiàn)數(shù)據(jù)隔行變色的方式大概有3種：CSS、JavaScript、jQuery實(shí)現(xiàn)隔行變色。
下面我們一個(gè)已經(jīng)編寫好的CSS代碼，分為3種不同的方式，應(yīng)用到我們的數(shù)據(jù)表格中。
style.css公用的CSS代碼如下：
需要實(shí)現(xiàn)的數(shù)據(jù)表格樣式如下圖：
表格數(shù)據(jù)的HTML代碼：
1、 CSS實(shí)現(xiàn)表格隔行變色
實(shí)現(xiàn)CSS控制表格方式的代碼比較簡(jiǎn)單，只需要在<table/>標(biāo)記中加入：class=”datalist”，每一個(gè)奇數(shù)行或偶數(shù)行的<tr/>標(biāo)記加入：class=”altrow”即可。
2、 JavaScript實(shí)現(xiàn)表格隔行變色
在HTML頁(yè)面中加入JavaScript代碼到<HEAD/>標(biāo)記中：
3、 jQuery實(shí)現(xiàn)表格隔行變色
在HTML頁(yè)面中引入jQuery庫(kù)文件以及在<HEAD/>標(biāo)記添加相應(yīng)的JavaScript代碼：
可以看出，使用jQuery很容易實(shí)現(xiàn)隔行變色的效果，也是作者我推薦大家使用的一種方式。
對(duì)于jQuery庫(kù)文件的下載，各位讀者可以到官方網(wǎng)站：www.jquery.org下載。下載得到的庫(kù)文件就只是一個(gè)簡(jiǎn)單普通的JS文件。
4、 jQuery實(shí)現(xiàn)表格行數(shù)據(jù)高亮顯示
對(duì)于表格數(shù)據(jù)在鼠標(biāo)經(jīng)過(guò)時(shí)高亮顯示，使用jquery也是非常容易的，只需要簡(jiǎn)短的幾句jquery代碼即可：
將上述代碼加入到JS文件引入到HTML頁(yè)面或者是放置在HTML頁(yè)面的<HEAD/>標(biāo)記的<SCRIPT/>中都可以的。
此時(shí)，jQuery代碼中引用了一個(gè)CSS類樣式，代碼如下：
將上述的CSS代碼寫入到CSS文件然后導(dǎo)入HTML頁(yè)面或者是放置到<HEAD/>標(biāo)記的<STYLE/>中都可以的。
總結(jié)：上述內(nèi)容雖然看似簡(jiǎn)單，但是在平常的開發(fā)工作中意義重大，希望大家要牢記。
| 
