jQuery实现表格隔行换色

2020-11-27 来源：尚佳旅游分享网

本文实例为大家分享了jQuery实现表格隔行换色的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>使用JQ完成表格隔行换色</title>
 <script src="js/jquery.min.js"></script>
 <script>
 $(function() {
 $("tbody tr:odd").css("background-color","aquamarine");
 $("tbody tr:even").css("background-color","bisque");
 var tb = $("tbody tr");
 var oldColor;
 for(var i=0;i<tb.length;i++) {
 //alert(oldColor);
 $("tbody tr")[i].onmouseover = function() {
 oldColor = this.style.backgroundColor;
 this.style.backgroundColor = "yellow";
 }
 $("tbody tr")[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>

疑问：为什么this.style.backgroundColor = oldColor中的this不能用$("tbody tr")[i]代替？？

显示全文

全部栏目

jQuery实现表格隔行换色