首頁 >web前端 >js教程 >表格奇偶行設定不同顏色的核心JS程式碼_jquery

表格奇偶行設定不同顏色的核心JS程式碼_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB原創
2016-05-16 17:07:281033瀏覽

這是一個比較實用的功能,設定奇偶行顏色不同後閱讀表格資料的體驗明顯變好,否則資料會顯得非常繁雜擁擠(當表格資料行多時體驗尤為明顯)。只有當你自己真正做這方面的東西接觸到時才有強烈的體會,反正我是剛剛經歷了,留在這裡備參考吧~

核心JS腳本代碼如下(table元素的id根據自己的狀況調整,程式碼中的jquery-1.7.min.js可以到jquery的官網上下載)

複製程式碼 程式碼如下:


<script> <BR>$(document).ready(function(){ <BR>SetTableRowColor(); <br><br>}); <BR>//用CSS控制奇偶行的顏色<BR>function SetTableRowColor() <BR>{ <br><br>$("#Tabletrtr :odd").css("background-color", "#e6e6fa"); <BR>$("#Table tr:even").css("background-color", "#fff0fa"); <BR> } <BR> <BR></script>
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn