如何使用 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 應用程式開發相關的任務。