码迷,mamicode.com
首页 > Web开发 > 详细

JQuery案例一:实现表格隔行换色

时间:2018-08-31 23:24:56      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:width   out   实现   min   mouseover   padding   UNC   jquer   i++   

<!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案例一:实现表格隔行换色

标签:width   out   实现   min   mouseover   padding   UNC   jquer   i++   

原文地址:https://www.cnblogs.com/keep-calm/p/9568651.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!