jQuery 是一個廣泛使用的 JavaScript 庫,可以大幅簡化 JavaScript 編程。其中遍歷功能更是讓開發人員事半功倍。當遇到需要遍歷一些 HTML 表格中的單元格時,jQuery 也同樣可以得心應手。下面我們來了解如何使用 jQuery 遍歷所有單元格。
// 遍歷 HTML 表格中的每個單元格 $( "table td" ).each(function() { // 處理單元格的內容 // 如:$(this).text() 獲取單元格的文本內容 });
首先,我們需要一個 HTML 表格,如下:
<table> <thead> <tr> <th>Title 1</th> <th>Title 2</th> <th>Title 3</th> </tr> </thead> <tbody> <tr> <td>Cell 1-1</td> <td>Cell 1-2</td> <td>Cell 1-3</td> </tr> <tr> <td>Cell 2-1</td> <td>Cell 2-2</td> <td>Cell 2-3</td> </tr> <tr> <td>Cell 3-1</td> <td>Cell 3-2</td> <td>Cell 3-3</td> </tr> </tbody> </table>
上述代碼創建了一個簡單的表格,其中有一個頭部和三行數據。
在 jQuery 中使用 each() 函數可對 HTML 表格中的所有單元格進行遍歷,如下:
$( "table td" ).each(function() { // 處理單元格的內容 // 如:$(this).text() 獲取單元格的文本內容 });
其中,“table td”選擇器可匹配到所有的表格單元格。然后,each() 函數會對每個單元格進行迭代,并將對應的單元格作為參數傳遞到匿名函數中。在該函數中,我們可以對單元格進行各種處理。
例如,我們可以使用 $(this).text() 方法獲取當前迭代的單元格的文本內容。此外,我們還可以更新單元格的內容、添加類名、應用樣式等等。
因此,以上代碼在遍歷表格單元格時可進行各種操作。