些時候，我們會從后臺獲取數據，然后以表格的形式顯示到前臺頁面~但是如果數據量很大的話就會不利于查看~也就是我們常說的注意用戶體驗~

總之用戶不開心~那么老板就會不開心，老板不開心咱們就別想開心了~所以咱們開動吧~

表格的隔行換色

步驟分析：

1）確定事件(onload)并為其綁定一個函數。

2）書寫函數(獲取表格)，獲取tbody里面的行數。

3）分別對奇數行和偶數行設置背景顏色

先來創建表格

我們之前分享的時候只說了<table>標簽，現在我們來補上一個知識點<thead>標簽~這個是表示表頭的標簽~

這樣我們的表格信息就寫好了，再來寫一下JavaScrip函數t代碼：這邊我們使用的是匿名函數，JS 中的 onload 事件會在頁面或圖像加載完成后立即發生。

1）首先利用表格的id獲取表格元素

2）然后獲取到表各種的行數

3）遍歷行數，如果是偶數就把背景色設置成銀色，如果是奇數就把背景色設置成為白色~

看一下頁面效果： 這里要注意一點數組是從0開始計數的~雖然我們的序號是“1”但是在數組中它是第“0”個元素~所以是銀色的~

高亮顯示

在表格中除了這個這種隔行換色顯示效果，還有一種就是我們鼠標選中這行數據，這行數據就顯示不同的1顏色，這種就做高亮顯示~下面我們來實現一下~

根據需求分析：

1）確定事件，這個效果和鼠標選中有關（onmouseover 和 onmouseout 事件可用于在用戶的鼠標移至 HTML 元素上方或移出元素時觸發函數。

）

2）書寫函數，獲取鼠標選中的那行數據并修改其背景色~

首先給每一行表格添加一個id號~然后分別為這行添加事件并綁定函數，

現在來補全函數

效果圖：

這個效果是鼠標滑動到哪一行哪一行就會改變背景顏色~

咱們還是學習知識點為主哈~

我是萌新娜娜

立志做一個不翻車的老司機

學習Java的路上請多多指教

大家如果想要更深入了解java相關知識，私信我回復：【Java】 即可知道你們想要知道的java相關問題