如何使用 jquery 獲取每個表格的單元格

Question

我的 html 文件中有多個表，現在我只想看看每個表中有多少td元素。 我正在嘗試這段代碼：

function process() {
    let arr= $('table');
    for(let i=0; i<arr.length; i++) {
        let table = arr[i];
        let cells = table.find('tr').find('td');
        console.log(cells.length);
    }
}

但我收到錯誤，因為 find is not a function error at table.find('tr').find('td');

解決此問題的正確方法是什么？

Answer 1

你能這樣試試嗎

function process() {
    let tables = $('table');
    for(let i=0; i<tables.length; i++) {
        let table = tables[i];
        let cells = $(table).find('tr > td');
        console.log(cells.length);
    }
}

Answer 2

let table = tables[i];

當您在 jQuery object 上執行[#]時，結果是結果堆棧上的元素被拉出 jQuery ZA8CFDE6331BD59EB66666。 因此，如果在jQuery.fn scope 中定義了這些方法，那么此時您不能對其使用 jQuery 方法。

要解決此問題，您應該使用tables.eq(i)來獲取元素，因為eq()將元素保存在 jQuery object 中，或者將元素放回$()中以再次包裝它。

我個人提倡使用eq() ，因為它是您必須編寫的重新包裝它的少一步。

Answer 3

這是執行此操作的純 jQuery 方法：

totalCount = 0;
$('table').each(function(a, b) {
    totalCount += $(b).find('td').length
})
console.log(totalCount)

 totalCount = 0; $('table').each(function(a, b) { totalCount += $(b).find('td').length }) console.log(totalCount)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table border=1> <tr> <td>test1</td> <td>test1</td> <td>test1</td> <td>test1</td> </tr> <tr> <td>test1</td> <td>test1</td> <td>test1</td> <td>test1</td> </tr> </table> <table border=1> <tr> <td>test1</td> <td>test1</td> <td>test1</td> <td>test1</td> </tr> <tr> <td>test1</td> <td>test1</td> <td>test1</td> <td>test1</td> </tr> </table> <table border=1> <tr> <td>test1</td> <td>test1</td> <td>test1</td> <td>test1</td> </tr> <tr> <td>test1</td> <td>test1</td> <td>test1</td> <td>test1</td> </tr> </table>