<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table,th,td { border-collapse: collapse; border: 1px solid #333; padding: 10px; } </style></head><body> <table> <tr><th>1</th><th>2</th><th>3</th></tr> <tr><td>a</td><td>b</td><td>c</td></tr> <tr><td>a</td><td>b</td><td>c</td></tr> <tr><td>a</td><td>b</td><td>c</td></tr> <tr><td>a</td><td>b</td><td>c</td></tr> </table> <script> var tr = document.querySelectorAll('tr') // 1.先遍历获取每个元素 for(var i = 0; i < tr.length; i++) { // 偶数行和奇数行色彩区别 if (i % 2 === 0) { tr[i].style.backgroundColor = 'white' }else { tr[i].style.backgroundColor = 'gray' } // 2.设置变量保留以后行的色彩 var tr_color; // 3.给所有项绑定鼠标悬停事件 tr[i].onmouseover = function () { // 鼠标悬停时将以后项的背景色赋值给变量 tr_color = this.style.backgroundColor // 鼠标悬停时更改以后项背景色彩 this.style.backgroundColor = 'hotpink' } // 4.给所有项绑定鼠标移出事件 tr[i].onmouseout = function () { // 鼠标移出时将变量保留的背景色从新赋值给以后项 this.style.backgroundColor = tr_color } } </script></body></html>