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

来源:https://www.cnblogs.com/keep-calm/archive/2018/08/31/9568651.html
-Advertisement-
Play Games

疑問:為什麼this.style.backgroundColor = oldColor中的this不能用$("tbody tr")[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]代替??


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 貝塞爾曲線: 貝塞爾曲線於 1962,由法國工程師皮埃爾·貝塞爾所廣泛發表,他運用貝塞爾曲線來為汽車的主體進行設計。貝塞爾曲線最初由 Paul de Casteljau 於 1959 年運用 de Casteljau 演演算法開發,以穩定數值的方法求出貝茲曲線。貝塞爾曲線主要用於二維圖形應用程式中的數 ...
  • 今天在整一個項目,需要利用串口通訊在網上看了好多人的帖子才稍微整齣了一點頭緒。 首先串口代碼就是利用谷歌自己的api,將java代碼放在java/android_serialport_api目錄下,如果你想改變這個報名需要用jni重新生成so文件,在這裡我是直接使用這個包名來簡化工作。 androi ...
  • 碎碎念 今年七月份本科畢業後入職一家會議平板公司,經過一個一個多月的鹹魚培訓輪崗生活,接手了幾個小任務,本次記錄一下其中一個任務:修改安卓5.0系統瀏覽器UI。剛接到任務的時候,本以為是很簡單的一個任務,從我以往淺薄的開發經驗來看,僅僅是修改UI佈局那自然是輕鬆愉快的事情,但是現實很骨感,經歷重重磨 ...
  • 比較出名的資料庫框架 GreenDao使用步驟: 1、app目錄下的build.gradle文件 添加依賴 頂部添加插件 2、根目錄下的build.gradle文件 配置 3、app目錄下的build.gradle文件 對generator生成文件配置 4、創建實體類,生成dao文件 5、make ...
  • Windows環境下Git安裝、配置SSH key、安裝node.js npm、安裝Hexo及配置 ...
  • 介紹 用JavaScript刷完了劍指offer,故總結下每道題的難度、解決關鍵點,詳細題解代碼可以點鏈接進去細看。 關於JS刷題的技巧可以看我之前的這篇JS刷題總結。 劍指offer的題目在牛客網上可以看:https://www.nowcoder.com/ta/coding-interviews ...
  • 遍歷應該是各種語言中常會用到的操作了,實現的方法也很多,例如使用for、while等迴圈語句就可以很輕鬆的做到對數組或對象的遍歷,今天想講的不是它們,而是簡單方便的遍歷方法。 大致的整理了一下,經常用到的大概有Jquery的$.each、$.map、each()、map()、get()、toArra ...
  • ``` 全選和全不選以及反選 全選 編號姓名年齡 1張三12 2李四22 3王五13 4馬六14 ... ...
一周排行
    -Advertisement-
    Play Games
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...