jQuery是一個廣泛使用的JavaScript庫,它提供了各種各樣的功能來簡化JS編程,其中遍歷是其中一個特別重要的功能。本文將介紹如何使用jQuery遍歷一個tr。
<table id="myTable"> <tr> <td>Apple</td> <td>Red</td> <td>1.50</td> </tr> <tr> <td>Banana</td> <td>Yellow</td> <td>1.00</td> </tr> <tr> <td>Orange</td> <td>Orange</td> <td>2.00</td> </tr> </table>
上面是一個簡單的示例表格,我們將使用jQuery來遍歷每一個tr元素,并輸出每一行的信息。
$(document).ready(function(){ $('#myTable tr').each(function(){ //遍歷表格的每一個tr var itemName = $(this).find('td:eq(0)').text(); //獲取商品名稱 var itemColor = $(this).find('td:eq(1)').text(); //獲取商品顏色 var itemPrice = $(this).find('td:eq(2)').text(); //獲取商品價格 console.log(itemName + ", " + itemColor + ", " + itemPrice); //輸出每一行的信息 }); });
以上代碼首先通過jQuery獲取了id為myTable的表格,并通過each()方法遍歷了每一個tr元素。接著,使用find()方法獲取tr中每一個td元素的內容,并將其存儲到相應的變量中。最后,使用console.log()方法輸出每一行的信息。
當我們執(zhí)行以上代碼時,在瀏覽器的開發(fā)者工具中的控制臺中,將輸出以下信息:
Apple, Red, 1.50 Banana, Yellow, 1.00 Orange, Orange, 2.00
這就是使用jQuery遍歷一個tr的方法。不僅如此,jQuery還提供了許多其他方便的遍歷方法,可以讓我們更加便捷地訪問表格的每一個元素。