豆豆小说阅读网,穿越小说完本 ,欢乐颂第一季免费阅读

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

JSP表格隔行變色

我們常常在設(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代碼如下：

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

JSP表格隔行變色

需要實(shí)現(xiàn)的數(shù)據(jù)表格樣式如下圖：
JSP表格隔行變色

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

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

實(shí)現(xiàn)CSS控制表格方式的代碼比較簡(jiǎn)單，只需要在

標(biāo)記中加入：class=”datalist”，每一個(gè)奇數(shù)行或偶數(shù)行的標(biāo)記加入：class=”altrow”即可。

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

在HTML頁(yè)面中加入JavaScript代碼到標(biāo)記中：
JSP表格隔行變色

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

在HTML頁(yè)面中引入jQuery庫(kù)文件以及在標(biāo)記添加相應(yīng)的JavaScript代碼：
JSP表格隔行變色

可以看出，使用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代碼即可：
JSP表格隔行變色

將上述代碼加入到JS文件引入到HTML頁(yè)面或者是放置在HTML頁(yè)面的標(biāo)記的