在CSS中,我們可以使用:nth-child偽類(lèi)來(lái)隔行換色,以下是一個(gè)示例:
table tr:nth-child(even) { background-color: #f2f2f2; }
在這個(gè)示例中,我們使用了:nth-child(even)來(lái)選擇偶數(shù)行的表格行,并將它們的背景顏色設(shè)置為#f2f2f2,這樣,偶數(shù)行的表格行就會(huì)呈現(xiàn)出一個(gè)不同的顏色。
如果你想要隔行換色,但不想使用CSS,那么可以考慮使用JavaScript來(lái)實(shí)現(xiàn),以下是一個(gè)使用JavaScript實(shí)現(xiàn)隔行換色的示例:
var table = document.getElementById("myTable"); var rows = table.getElementsByTagName("tr"); for (var i = 0; i < rows.length; i++) { if (i % 2 == 0) { rows[i].style.backgroundColor = "#f2f2f2"; } else { rows[i].style.backgroundColor = "#ffffff"; } }
在這個(gè)示例中,我們獲取了表格中的所有行,并使用for循環(huán)來(lái)遍歷它們,我們使用if語(yǔ)句來(lái)判斷當(dāng)前行的索引是否為偶數(shù),如果是,則將其背景顏色設(shè)置為#f2f2f2,否則將其背景顏色設(shè)置為#ffffff,這樣,我們就可以實(shí)現(xiàn)隔行換色的效果了。