表格隔行变色
需求：设置表格隔行背景色一样，且鼠标悬停任意一行时，该行高亮显示为另一种背景色，鼠标离开该行，则显示回初始背景色。
- 获取所有行元素tr，声明变量oldColor用以保存初始背景色
- for循环给每行设置初始背景色，并绑定鼠标悬停事件和鼠标离开事件。
- 循环体内，if语句判断奇偶行，添加初始背景色
- 各行绑定鼠标悬停事件，驱动程序函数体里，首先将if语句里添加好的初始背景色赋值给变量oldColor，然后给调用函数的当前行，添加高亮色。
各行绑定鼠标离开事件，驱动程序函数体里，将oldColor赋值给调用函数的当前行，背景色由高亮色改为原色。
<body> <div class="wrap"> <table> <thead> <tr ...> </thead> <tbody id="j_tb"> <tr...> <tr...> <tr...> <tr...> <tr...> </tbody> </table> </div> <script> var trs = document.getElementById("j_tb").getElementsByTagName("tr"); var oldColor; for (var i = 0; i < trs.length; i++) { if (i % 2 == 0) { trs[i].style.backgroundColor = "#eee"; } else { trs[i].style.backgroundColor = "#fff"; } trs[i].onmouseover = function () { oldColor = this.style.backgroundColor; this.style.backgroundColor = "skyblue"; } trs[i].onmouseout = function () { this.style.backgroundColor = oldColor; } } </script> </body>