JS案例四:表格的隔行换色以及高亮显示
程序员文章站
2022-06-05 16:54:44
``` 编号姓名年龄 1 张三 12 2 李四 22 3 王五 13 4 马六 14 ... ......
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script> window.onload = function() { var oldcolor; var tblele = document.getelementbyid("tbl"); var len = tblele.tbodies[0].rows.length; for(var i = 0;i<len;i++) { if(i%2==0) { tblele.tbodies[0].rows[i].style.backgroundcolor = "pink"; //添加鼠标经过事件 tblele.tbodies[0].rows[i].onmouseover = function() { oldcolor = this.style.backgroundcolor; this.style.backgroundcolor = "blue"; } // 添加鼠标离开事件 tblele.tbodies[0].rows[i].onmouseout = function() { this.style.backgroundcolor = oldcolor; } }else{ tblele.tbodies[0].rows[i].style.backgroundcolor = "gold"; //添加鼠标经过事件 tblele.tbodies[0].rows[i].onmouseover = function() { oldcolor = this.style.backgroundcolor; this.style.backgroundcolor = "blue"; } // 添加鼠标离开事件 tblele.tbodies[0].rows[i].onmouseout = function() { this.style.backgroundcolor = oldcolor; } } } } </script> </head> <body> <table id="tbl" border="1" border-collapse="collapse" align="center" cellspacing="0" cellpadding="5" width="400" height="20"> <thead> <tr> <th>编号</th><th>姓名</th><th>年龄</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>12</td> </tr> <tr> <td>2</td> <td>李四</td> <td>22</td> </tr> <tr> <td>3</td> <td>王五</td> <td>13</td> </tr> <tr> <td>4</td> <td>马六</td> <td>14</td> </tr> <tr> <td>5</td> <td>伍六七</td> <td>17</td> </tr> <tr> <td>6</td> <td>梅花十三</td> <td>17</td> </tr> </tbody> </table> </body> </html>