如下代码实现当鼠标移动到这一行，这一行颜色改变
- <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>