表格隔行變色
需求：設置表格隔行背景色一樣，且鼠標懸停任意一行時，該行高亮顯示爲另一種背景色，鼠標離開該行，則顯示回初始背景色。
- 獲取所有行元素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>