如何使用 jQuery 選擇表格的最後一行?


jQuery 是 JavaScript 中一個廣泛使用的工具,它簡化了操作 HTML 文件和執行其他與網站開發相關的任務的過程。

在本文中,我們將瞭解如何使用 jQuery 選擇表格的最後一行。此外,我們還將學習執行此任務的不同方法。

為什麼選擇表格的最後一行很重要?

讓我們看看為什麼我們需要選擇表格的最後一行,以及為什麼它成為一項重要的任務。基本上,當開發人員需要動態地將新資料更改或修改到現有表格中時,它可以確保新新增的資料可以修改到表格的末尾。選擇最後一行的另一個功能是,有時開發人員需要執行一些要在表格的最後一行執行的計算。當開發人員想要設定最後一行的現有類樣式(例如更改背景顏色、文字外觀等)時,它也變得很重要。

在 jQuery 中選擇表格最後一行的不同方法

選擇最後一行可以透過多種方式實現,其中一些將在下面與它們的定義、語法和示例一起討論。讓我們逐一討論每一種方法。

方法 1:使用 last() 方法

我們使用 jQuery 選擇表格最後一行的第一種方法是藉助 last() 方法。此方法用於選擇匹配元素集的最後一個元素。

此方法非常易於使用,在這裡我們首先使用 find() 方法選擇表格的所有行。之後,我們將 last() 方法應用於匹配的元素集以選擇最後一行。讓我們首先看看它的語法,然後轉到完整的示例:

語法

$("#tpTable").find("tr").last(
.css("background-color", "green");

示例

在此示例中,我們建立了一個 id 為“tpTable”的表格和一個 id 為“change-row”的按鈕。為了選擇最後一行,我們將藉助我們建立的按鈕。單擊按鈕後,last() 方法將被呼叫,並將最後一行背景顏色更改為綠色。

<!DOCTYPE html>
<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
   </script>
</head>
<body>
   <table id="tpTable">
      <thead>
         <tr>
            <th>S.no</th>
            <th>Subject</th>
            <th>Marks</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>1</td>
            <td>Computer Science</td>
            <td>100</td>
         </tr>
         <tr>
            <td>2</td>
            <td>Maths</td>
            <td>95</td>
         </tr>
         <tr>
            <td>3</td>
            <td>Science</td>
            <td>89</td>
         </tr>
         <tr>
            <td>4</td>
            <td>English</td>
            <td>98</td>
         </tr>
      </tbody>
   </table>
   <button id="change-row">Select</button>
   <script>
      $(document).ready(function () {
         $('#change-row').click(function () {
            $('#tpTable').find('tr').last().css('background-color', 'green');
         });
      });
   </script>
</body>
</html>

輸出

方法 2:使用 eq() 方法

我們使用 jQuery 選擇表格最後一行的第二種方法是藉助 eq() 方法。此方法用於根據索引選擇匹配元素集的最後一個元素。

此方法非常易於使用,在這裡我們首先檢查最後一行的索引。為此,我們使用匹配元素集的 length 屬性,最後我們使用 eq() 方法選擇最後一行。讓我們首先看看它的語法,然後轉到完整的示例:

語法

$("#tpTable").find("tr")
.eq($("#tpTable").find("tr").length - 1)
.css("background-color", "green");

示例

在此示例中,我們建立了一個 id 為“tpTable”的表格和一個 id 為“change-row”的按鈕。為了選擇最後一行,我們將藉助我們建立的按鈕。單擊按鈕後,eq() 方法將檢查最後一行的索引,完成後,它將最後一行背景顏色更改為藍色。

<!DOCTYPE html>
<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
   </script>
</head>
<body>
   <table id="tpTable">
      <thead>
         <tr>
            <th>S.no</th>
            <th>Subject</th>
            <th>Marks</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>1</td>
            <td>Computer Science</td>
            <td>100</td>
         </tr>
         <tr>
            <td>2</td>
            <td>Maths</td>
            <td>95</td>
         </tr>
         <tr>
            <td>3</td>
            <td>Science</td>
            <td>89</td>
         </tr>
         <tr>
            <td>4</td>
            <td>English</td>
            <td>98</td>
         </tr>
      </tbody>
   </table>
   <button id="change-row">Select</button>
   <script>
      $(document).ready(function () {
         $('#change-row').click(function () {
            var numRows = $('#tpTable').find('tr').length;
            $('#tpTable').find('tr').eq(numRows - 1).css('background-color', 'blue');
         });
      });
   </script>
</body>
</html>

輸出

方法 3:使用 :last() 選擇器

我們使用 jQuery 選擇表格最後一行的最後一種方法是藉助 :last() 選擇器。請注意,此方法與 last() 方法有點類似,但區別在於它是一種更簡潔的方法,用於選擇匹配元素集的最後一個元素。

此方法非常易於使用,在這裡我們首先使用 jQuery 選擇器“$("#tpTable")”選擇表格。讓我們首先看看它的語法,然後轉到完整的示例:

語法

$("#tpTable tr:last")
.css("background-color", "green");

示例

在此示例中,我們建立了一個 id 為“tpTable”的表格和一個 id 為“change-row”的按鈕。為了選擇最後一行,我們將藉助我們建立的按鈕。單擊按鈕後,:last() 選擇器將呼叫最後一個“tr”以將最後一行背景顏色更改為橙色。

<!DOCTYPE html>
<html>
<head>
   <title>Tutorialspoint</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
   </script>
</head>
<body>
   <table id="tpTable">
      <thead>
         <tr>
            <th>S.no</th>
            <th>Subject</th>
            <th>Marks</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>1</td>
            <td>Computer Science</td>
            <td>100</td>
         </tr>
         <tr>
            <td>2</td>
            <td>Maths</td>
            <td>95</td>
         </tr>
         <tr>
            <td>3</td>
            <td>Science</td>
            <td>89</td>
         </tr>
         <tr>
            <td>4</td>
            <td>English</td>
            <td>98</td>
         </tr>
      </tbody>
   </table>
   <button id="change-row">Select</button>
   <script>
      $(document).ready(function () {
         $('#change-row').click(function () {
            $("#tpTable tr:last").css("background-color", "orange");
         });
      });
   </script>
</body>
</html>

輸出

結論

使用 jQuery 選擇表格的最後一行是一項簡單的任務。這允許我們動態地修改新新增的資料,執行計算等。除此之外,它還使開發人員能夠設定最後一行的樣式,例如更改其背景、文字顏色或外觀。我們看到了使用 jQuery 選擇表格最後一行的三種不同方法,包括 last() 方法、eq() 方法和 :last() 選擇器。所有方法都易於使用,並有助於有效且高效地完成各種與 Web 應用程式開發相關的任務。

更新於:2023年5月10日

2K+ 次瀏覽

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告