js表格中的DOM操作之隔行變色，滑鼠進入當前行高亮
阿新 • • 發佈：2018-12-15
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> </style> <script> /** 功能實現：1、實現表格隔行變色功能 2、實現滑鼠移入表格當前行高亮展示 步驟：1、根據表格id獲取當前表格 2、獲取表格中的tBody(Bodies[0]) 3、迴圈tBody中的行數，偶數行設定背景色為灰色 */ window.onload = function(){ //獲取ID為tab1的表格 var oTab = document.getElementById('tab1'); //*為防止行事件變色後將原來的背景色覆蓋掉，定義變數記錄原背景色 var preBackground=null; //alert(oTab.tBodies[0].rows.length); //迴圈遍歷表格每一行 for(var i=0;i<oTab.tBodies[0].rows.length;i++){ //判斷當前行是否為偶數行 if(i%2==0){ //設定當前行的背景色 oTab.tBodies[0].rows[i+1].style.background='gray'; } //為每一行增加滑鼠移入事件 oTab.tBodies[0].rows[i].onmouseover = function(){ preBackground = this.style.background; this.style.background='yellow'; } //為每一行增加滑鼠移出事件 oTab.tBodies[0].rows[i].onmouseout = function(){ this.style.background=preBackground; } } } </script> </head> <body> <table border="1px" width="300px" id="tab1"> <tHead> <tr> <td>ID</td> <td>姓名</td> <td>年齡</td> </tr> </tHead> <tBody> <tr> <td>1</td> <td>張三</td> <td>22</td> </tr> <tr> <td>2</td> <td>李四</td> <td>27</td> </tr> <tr> <td>3</td> <td>王五</td> <td>3</td> </tr> <tr> <td>4</td> <td>趙六</td> <td>50</td> </tr> <tr> <td>5</td> <td>王小七</td> <td>30</td> </tr> <tr> <td>6</td> <td>劉小二</td> <td>36</td> </tr> </tBody> </table> </body> </html>