如下代碼實現當鼠標移動到這一行，這一行顏色改變
- <html>
- <head>
- <title>鼠標移動到一行變色</title>
- <style type="text/css">
- </style>
- </head>
- <body>
- <table border="1" align="center" id="table" width="600">
- <tr>
- <th>姓名</th>
- <th>年齡</th>
- <th>性別</th>
- <th>聯繫方式</th>
- </tr>
- <tr>
- <td>小趙</td>
- <td>25</td>
- <td>女</td>
- <td>15339125250</td>
- </tr>
- <tr>
- <td>小錢</td>
- <td>50</td>
- <td>男</td>
- <td>15339125251</td>
- </tr>
- <tr>
- <td>小孫</td>
- <td>20</td>
- <td>女</td>
- <td>15339125252</td>
- </tr>
- <tr>
- <td>小李</td>
- <td>19</td>
- <td>男</td>
- <td>15339125253</td>
- </tr>
- <tr>
- <td>小楊</td>
- <td>25</td>
- <td>女</td>
- <td>15339125254</td>
- </tr>
- <tr>
- <td>小宋</td>
- <td>12</td>
- <td>女</td>
- <td>15339125256</td>
- </tr>
- </table>
- <script type="text/javascript">
- //改變表格選中行的背景顏色
- function changeBgcolor(e){
- //得到事件參數對象e,ie通過window.event得到時間參數對象，非ie通過even傳入
- e = e || window.event;
- //獲取引發事件的事件源對象(此處是得到一個單元格對象)
- var target = e.target || e.srcElement;
- //通過節點的parentNote屬性得到他的父節點對象
- var tr = target.parentNode;
- //設置tr節點的樣式
- tr.style.background = "green";
- tr.style.color = "red";
- }
- function reback(e){
- //得到事件參數對象e,ie通過window.event得到時間參數對象，非ie通過even傳入
- e = e || window.event;
- //獲取引發事件的事件源對象(此處是得到一個單元格對象)
- var target = e.target || e.srcElement;
- //通過節點的parentNote屬性得到他的父節點對象
- var tr = target.parentNode;
- //設置tr節點的樣式
- tr.style.background = "white";
- tr.style.color = "black";
- }
- //得到表格對象
- var tb = document.getElementById("table");
- //遍歷每一行,給每一行添加事件
- for(var i = 1; i< tb.rows.length; i++){
- //得到行對象
- var tr = tb.rows[i];
- tr.onmouseover = changeBgcolor;
- tr.onmouseout = reback;
- }
- </script>
- </body>
- </html>