jQuery隔行變色與普通JS寫法的對(duì)比？第一行表示表的直接子元素tr每隔一行更改一次顏色如果tr外有tbody和其他標(biāo)記則tr不會(huì)更改顏色第二行表示表中的所有tr每隔一行更改一次顏色1。在HTML文

jQuery隔行變色與普通JS寫法的對(duì)比？

第一行表示表的直接子元素tr每隔一行更改一次顏色

如果tr外有tbody和其他標(biāo)記

則tr不會(huì)更改顏色

第二行表示表中的所有tr每隔一行更改一次顏色

1。在HTML文件中，編寫一個(gè)基本表元素，并將邊框?qū)挾仍O(shè)置為1px。

2. 打開瀏覽器并檢查瀏覽器中的效果。你可以看到目前沒(méi)有什么風(fēng)格。這是一張簡(jiǎn)單的桌子。

3. 使用CSS代碼給表格添加樣式，將其設(shè)置為顯示在中間，單元格的寬度將變長(zhǎng)，高度將增加。

4. 再次打開瀏覽器以查看效果。您可以看到表格的樣式很漂亮，顯示信息也很清晰。

5. 在CSS代碼中，使用第n個(gè)子方法來(lái)區(qū)分表中每行的奇數(shù)和偶數(shù)，奇數(shù)和偶數(shù)列被賦予不同的顏色。

6. 打開瀏覽器刷新頁(yè)面，可以看到表格已經(jīng)達(dá)到了交錯(cuò)變色的效果。以上步驟就是為了實(shí)現(xiàn)這個(gè)功能。

html中表格怎么實(shí)現(xiàn)隔行變色？

過(guò)去，在制作頁(yè)面顯示列表時(shí)，我們要做一組數(shù)據(jù)交錯(cuò)變色。我當(dāng)時(shí)不知道，我們用了很多JS腳本來(lái)判斷，寫了很多例子，比如下面。HTML代碼//循環(huán)獲取列表//循環(huán)結(jié)束后，使用CSS控制。直接彈出背景-顏色：表達(dá)式( 這個(gè).rowIndex%2==0？“一種顏色”：“另一種顏色”光標(biāo)：手}這樣，如果你想顯示上面的樣式，你只需要寫：HTML代碼//loop得到列表//loop結(jié)束，CSS版本只適用于較低版本ie，表達(dá)式會(huì)死機(jī)，如果頁(yè)面非常復(fù)雜。它不像以前在兩個(gè)類之間切換的簡(jiǎn)單方法那樣可靠。在高級(jí)瀏覽器中，cssselector（流行的JS庫(kù)基本上實(shí)現(xiàn)了一個(gè)集合）：tr:nth child（2n1）/*奇數(shù)行*/tr:nth child（odd）/*奇數(shù)行*/tr:nth child（2n1）/*奇數(shù)行*/tr:nth child（2n1）0）/*偶行*/tr:nth child（event）/*偶行*/jQuery版本：jQuery也是非常簡(jiǎn)單。1定義兩個(gè)類來(lái)實(shí)現(xiàn)$（“tr:event”）。Addclass（“偶數(shù)行”）$（“tr:odd”）。Addclass（“奇數(shù)行”）2。或一行代碼$（“tr”）。每個(gè)函數(shù)（I）{此樣式背景色[“#ccc”，“#fff”][I%2]}）表控件：使CSS類以不同的方式顯示表中的奇偶行，這并不復(fù)雜“>