用css、js實現table表格隔行變色的效果
新建一個html頁面，定名為test.html，用于講解用css、js實現table表格隔行變色的結果。
在test.html頁面，利用table標簽建立五行四列的表格，代碼如下：
在test.html頁面，利用css美化表格，設置表格的邊框的樣式、寬度，代碼如下：
在js中，建立一個fun（）函數，并經由過程onload設置在頁面加載完當作時，執行fun（）函數。
經由過程getElementById、getElementsByTagName方式獲得表格所有的行對象，經由過程for輪回遍歷表格每一行，若是行數為偶數，則設置tr的class屬性為t2，若是行數為奇數，則設置tr的class屬性為t1。
利用css設置表格行的class屬性為t1時，單位格的布景顏色為白色，class屬性為t2時，單位格的布景顏色為灰色。
在瀏覽器打開test.html頁面，查看表格是否實現了隔行變色的結果。
- 發表于 2019-09-01 17:00
- 閱讀 ( 1132 )
- 分類：其他類型
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章