表格奇偶行設(shè)置不同顏色的核心JS代碼
更新時(shí)間：2013年12月24日 15:33:39 作者：
表格奇偶行設(shè)置不同顏色，在某些情況下還是比較實(shí)用的，下面有個(gè)不錯(cuò)的示例，大家可以參考下，希望對(duì)大家有所幫助
這是一個(gè)比較實(shí)用的功能，設(shè)置奇偶行顏色不同后閱讀表格數(shù)據(jù)的體驗(yàn)明顯變好，否則數(shù)據(jù)會(huì)顯得非常繁雜擁擠（當(dāng)表格數(shù)據(jù)行多時(shí)體驗(yàn)尤為明顯）。只有當(dāng)你自己真正做這方面的東西接觸到時(shí)才有強(qiáng)烈的體會(huì)，反正我是剛剛經(jīng)歷了，留在這里備參考吧~
核心JS腳本代碼如下（table元素的id根據(jù)自己的情況調(diào)整，代碼中的jquery-1.7.min.js可以到j(luò)query的官網(wǎng)上下載）
<script src="jquery-1.7.min.js"></script>
<script>
$(document).ready(function(){
SetTableRowColor();
});
//用CSS控制奇偶行的顏色
function SetTableRowColor()
{
$("#Table tr:odd").css("background-color", "#e6e6fa");
$("#Table tr:even").css("background-color", "#fff0fa");
}
</scirpt>
核心JS腳本代碼如下（table元素的id根據(jù)自己的情況調(diào)整，代碼中的jquery-1.7.min.js可以到j(luò)query的官網(wǎng)上下載）
復(fù)制代碼 代碼如下:
<script src="jquery-1.7.min.js"></script>
<script>
$(document).ready(function(){
SetTableRowColor();
});
//用CSS控制奇偶行的顏色
function SetTableRowColor()
{
$("#Table tr:odd").css("background-color", "#e6e6fa");
$("#Table tr:even").css("background-color", "#fff0fa");
}
</scirpt>
相關(guān)文章
$號(hào)是jQuery“類”的一個(gè)別稱，$()構(gòu)造了一個(gè)jQuery對(duì)象。所以，“$()”可以叫做jQuery的構(gòu)造函數(shù)（個(gè)人觀點(diǎn)，呵呵！）。2009-12-12
在頁(yè)面上圖片比較多的時(shí)候，打開一張頁(yè)面必然引起與服務(wù)器大數(shù)據(jù)量的交互。尤其是對(duì)于高清晰的圖片，占了幾百K的空間。那么我們?nèi)绾尾拍芨淖冞@種狀況呢，這就是今天我們要探討的問(wèn)題了。2015-03-03
jQuery UI AutoComplete 使用說(shuō)明
在 jQuery UI 的最近更新中增加了自動(dòng)完成控件 AutoComplete，這為我們提供了又一個(gè)強(qiáng)大的開發(fā)工具，這里介紹一下這個(gè)控件的使用方式。2011-06-06
jQuery EasyUI API 中文文檔 搜索框 SearchBox 搜索框使用介紹，需要的朋友可以參考下。2011-09-09
這篇文章介紹了多行文本框(textarea)高度變化的操作，有需要的朋友可以參考一下2013-07-07
JQuery操作與遍歷元素并設(shè)置其屬性、樣式和內(nèi)容
本文詳細(xì)講解了JQuery操作與遍歷元素并設(shè)置其屬性、樣式和內(nèi)容的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-04-04
jquery ajax 簡(jiǎn)單范例(界面+后臺(tái))
jquery ajax示例包含界面及后臺(tái)部分，經(jīng)測(cè)試效果還不錯(cuò)，喜歡的朋友可以拿去用，或二次修改2013-11-11
今天小編就為大家分享一篇關(guān)于jquery層次選擇器的介紹，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
這篇文章給大家介紹了jquery 圖片輪播代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-01-01
jQuery模板技術(shù)和數(shù)據(jù)綁定實(shí)現(xiàn)代碼
如果你用過(guò)ASP.NET的數(shù)據(jù)綁定控件，也用過(guò)ASP或者JSP里那種通過(guò)輸出HTML元素在頁(yè)面上顯示數(shù)據(jù)的方法，你就知道ASP.NET數(shù)據(jù)綁定控件有多么方便。如果能夠?qū)⑼瑯拥墓δ茉跒g覽器端用HTML和JavaScript實(shí)現(xiàn)，那該是多少美妙的事情。2010-05-05