我們常常在設(shè)計網(wǎng)站或者是信息系統(tǒng)時，數(shù)據(jù)龐大而繁多，那么如何有效地在頁面中顯示數(shù)據(jù)，很大程度上決定了系統(tǒng)的人性化設(shè)計理念。

當(dāng)前數(shù)據(jù)顯示最為普遍的組織方式便是“表格”，表格在顯示多行時我們會將它“隔行變色”，提高用戶對數(shù)據(jù)的易操作性；并且對數(shù)據(jù)經(jīng)過的行設(shè)為為“高亮顯示”，方便用戶聚焦關(guān)注的數(shù)據(jù)。

實現(xiàn)數(shù)據(jù)隔行變色的方式大概有3種：CSS、JavaScript、jQuery實現(xiàn)隔行變色。

下面我們一個已經(jīng)編寫好的CSS代碼，分為3種不同的方式，應(yīng)用到我們的數(shù)據(jù)表格中。

style.css公用的CSS代碼如下：

公司主營業(yè)務(wù)：做網(wǎng)站、成都網(wǎng)站建設(shè)、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出大同免費做網(wǎng)站回饋大家。

需要實現(xiàn)的數(shù)據(jù)表格樣式如下圖：



表格數(shù)據(jù)的HTML代碼：



1、 CSS實現(xiàn)表格隔行變色

實現(xiàn)CSS控制表格方式的代碼比較簡單，只需要在<table/>標(biāo)記中加入：class=”datalist”，每一個奇數(shù)行或偶數(shù)行的<tr/>標(biāo)記加入：class=”altrow”即可。


2、 JavaScript實現(xiàn)表格隔行變色

在HTML頁面中加入JavaScript代碼到<HEAD/>標(biāo)記中：



3、 jQuery實現(xiàn)表格隔行變色

在HTML頁面中引入jQuery庫文件以及在<HEAD/>標(biāo)記添加相應(yīng)的JavaScript代碼：


可以看出，使用jQuery很容易實現(xiàn)隔行變色的效果，也是作者我推薦大家使用的一種方式。

對于jQuery庫文件的下載，各位讀者可以到官方網(wǎng)站：www.jquery.org下載。下載得到的庫文件就只是一個簡單普通的JS文件。


4、 jQuery實現(xiàn)表格行數(shù)據(jù)高亮顯示

對于表格數(shù)據(jù)在鼠標(biāo)經(jīng)過時高亮顯示，使用jquery也是非常容易的，只需要簡短的幾句jquery代碼即可：


將上述代碼加入到JS文件引入到HTML頁面或者是放置在HTML頁面的<HEAD/>標(biāo)記的<SCRIPT/>中都可以的。


此時，jQuery代碼中引用了一個CSS類樣式，代碼如下：


將上述的CSS代碼寫入到CSS文件然后導(dǎo)入HTML頁面或者是放置到<HEAD/>標(biāo)記的<STYLE/>中都可以的。


總結(jié)：上述內(nèi)容雖然看似簡單，但是在平常的開發(fā)工作中意義重大，希望大家要牢記。