首頁 > 網際網路

怎麼使用jquery完成表格隔行換色效果?

2019-12-11 14:09:44

下面是使用html+jquery完成表格隔行換色的簡單案例,感興趣的可以看一下下方由炳同學帶來的圖文記錄。


1

首先我們建立一個以html5為模板的html檔案,然後在標題標籤中新增——jquery完成隔行換色


2

接下來我們在html的主體body中新增表格內容。



3

隨後便是jquery部分的程式碼。首先引入jquery的庫檔案。


4

再接下來如圖所示我們二話不說給它來一個jquery的載入函數。


5

然後通過$("tbody tr:even") 這個獲取tbody下所有的偶數行。注意這個遇數指的是index的值,是從0開始的,0也是偶數;並不是指案例中的編號。

然後這些元素呼叫css("鍵",「值」)新增css程式碼來改變它的顯示效果。

$("tbody tr:even").css("background","red");



6

同理我們再來一個更改表格奇數行背景顏色的語句,具體如圖。


7

完成了程式碼之後,我們通過瀏覽器來執行html看一下顯示效果。如圖,已經實現隔行換色。



IT145.com E-mail:sddin#qq.com