如何JavaScript完成表格 高亮顯示擴充套件，詳細步驟如下：
阿新 • • 發佈：2018-12-08
大家好，我是今天的博主，<一個想做全棧的鹹魚>
話不多說直接進入主題
首先呢？讓我們來進行分析：
第一步：確定事件(onmouseover和onmouseout)並分別為其繫結一個函式
第二步：獲取滑鼠移上去的那行，對其設定背景顏色
程式碼：
JS程式碼：
<script> function changeColor(id,flag){ if(flag=="over"){ document.getElementById(id).style.backgroundColor="red"; }else if(flag=="out"){ document.getElementById(id).style.backgroundColor="white"; } } </script>
HTML程式碼
<tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">
自己做的例子共大家參考：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格高亮顯示</title> <script> function changColor(id,flag){ if(flag=="over"){ //滑鼠點選到該位置時，顯示該顏色 document.getElementById(id).style.backgroundColor="darkslategrey"; }else if(flag=="out"){ //離開結束時是當前顏色 document.getElementById(id).style.backgroundColor="darkgoldenrod"; } } </script>> </head> <body> <!--分析 1.確定事件（onmouseover和onmouseout）分別為其繫結一個函式 2.獲取滑鼠移上去的行，對其設定背景顏色--> <table border="1" width="500" height="300" align="center" cellpadding="0" cellspacing="0" id="tbl"> <thead> <tr> <th>編號</th> <th>姓名</th> <th>年齡</th> </tr> </thead> <tbody> <tr align="center" onmouseover="changColor('p1','over')" id="p1" onmouseout="changColor('p1','out')"> <td>1</td> <td>張三</td> <td>14</td> </tr> <tr align="center" onmouseover="changColor('p2','over')" id="p2" onmouseout="changColor('p2','out')"> <td>2</td> <td>李四</td> <td>15</td> </tr> <tr align="center" onmouseover="changColor('p3','over')" id="p3" onmouseout="changColor('p3','out')"> <td>3</td> <td>王五</td> <td>16</td> </tr> <tr align="center" onmouseover="changColor('p4','over')" id="p4" onmouseout="changColor('p4','out')"> <td>4</td> <td>王五</td> <td>16</td> </tr> <tr align="center" onmouseover="changColor('p5','over')" id="p5" onmouseout="changColor('p5','out')"> <td>5</td> <td>王五</td> <td>16</td> </tr> <tr align="center" onmouseover="changColor('p6','over')" id="p6" onmouseout="changColor('p6','out')"> <td>6</td> <td>王五</td> <td>16</td> </tr> <tr align="center" onmouseover="changColor('p7','over')" id="p7" onmouseout="changColor('p7','out')"> <td>7</td> <td>王五</td> <td>16</td> </tr> </tbody> </body> </html>
最後在囉嗦總結一下，回顧之前已經使用過的事件(onsubmit/onclick/onload/onfocus/onblur/onmouseover/onmouseout)
onfocus/onblur:聚焦離焦事件，用於表單校驗的時候比較合適。
onclick/ondblclick:滑鼠單擊和雙擊事件
onkeydown/onkeypress：搜尋引擎使用較多
onload：頁面載入事件，所有的其它操作(匿名方式)都可以放到這個繫結的函式裡面去。如果是有名稱，那麼在html頁面中只能寫一個。
onmouseover/onmouseout/onmousemove：購物網站商品詳情頁。
onsubmit：表單提交事件 ，有返回值，控制表單是否提交。
onchange:當用戶改變內容的時候使用這個事件(二級聯動)。
希望可以幫助到大家，我們下次再見，我還是那個鹹魚!