JQuery案例一:實現表格隔行換色

來源:互聯網
上載者:User

標籤: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案例一:實現表格隔行換色

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.