如何循環表格元素並使用JQuery檢索數據元素？

我有一個HTML表看起來像這樣在一個標準的HTML 4.01過渡頁：如何循環表格元素並使用JQuery檢索數據元素？

<table> 
    <thead> 
    <tr> 
     <th>Col 1</th> 
     <th>Col 2</th> 
     <th>etc...</th> 
    </tr> 
    </thead> 
    <tbody id="tableBodyID"> 
    <tr class="rowElement" data-element="some-data-here"> 
     <td>Some Table Data</td> 
     <td>Some More Table data</td> 
     <td>etc.</td> 
    </tr> 
    <tr class="rowElement" data-element="some-data-here"> 
     <td>Some Table Data</td> 
     <td>Some More Table data</td> 
     <td>etc.</td> 
    </tr> 
    </tbody> 
</table>

我想遍歷所有行和數據元素場拿到「數據」，並將其放置在一個使用JQuery的變量。我已經嘗試了許多.children（），.data（）和.each（）的變體，但一直未能檢索「數據」元素。

我已經試過（A $（文件）。就緒（）內塊...）：

$('tbody > tr').each(function() { 
    alert($(this).data('element')); // CORRECTION - this works. 
}); 

$('tbody').children().each(function() { 
    alert($(this).data('element')); // CORRECTION - this works 
}); 

$('.rowElement').each(function(i, obj) { 
    rowValue = $(this); 
    alert(rowValue.data('element')); // CORRECTION - this works 
});

任何幫助是值得歡迎的。我正在使用HTML 4.01和JQuery 1.7.1。我一直在Firefox中進行測試，但需要支持其他標準瀏覽器Firefox，Opera，Safari，Chrome和IE8 +。

（編輯輕微語法變化）

實際問題就屬於這種情況的問題，請參見下面的評論。問題解決了。

來源

2012-03-29 user1295718

我發現我的答案，在我的數據元素中使用了錯誤的情況。在我的html中，它是data-Element，我不知道它是瀏覽器，javascript還是jquery，但是data-Element被轉換成數據元素，所以當我調用var時，我命名爲.data（ '元素'）有那個名字做數據元素。感謝所有的輸入，我喜歡我見過的代碼。但在這種情況下，這是一個簡單的案例錯誤。 – user1295718 2012-03-29 13:56:50

這個工作對我來說：

$('table').find('tbody > tr').each(function() { 
    alert($(this).data('element')); 
});

http://jsfiddle.net/LBKvm/

（它可能不是然而，最有效的方法）

來源

2012-03-29 13:09:14 Magrangs

使用.map和.get，可以將每個tr映射到element數據屬性，以獲得這些值的陣列。至於選擇器，ID是最直接的，因爲它直接指向tbody元素，其中您想要tr後代：http://jsfiddle.net/zeFGW/。

var elementValues = $("#tableBodyID tr.rowElement").map(function() { 
    return $(this).data("element"); // replace each `tr` with its `element` data 
}).get(); // turn jQuery object into an array

來源

2012-03-29 12:59:55 pimvdb

這不是我正在尋找的東西，但它確實做得很好，我可能最終會改變處理數據的方式來使用它。謝謝。 – user1295718 2012-03-29 13:52:01

你的邏輯/呼籲合作我，你有幾個語法問題，但在之後的括號的應該是('element'));而且選擇器也需要被引用，tbody的缺失應該是('tbody')等。

jsfiddle。（請注意我更換警報到CONSOLE.LOG呼叫）

測試在Chrome 17

是您的代碼是什麼張貼在不同的問題？

來源

2012-03-29 13:09:15 Louis

如果您還有問題，請告訴我，我會根據需要更新我的答案。 – Louis 2012-03-29 13:11:50

感謝您的幫助，我找到了解決方案，我的html顯得更加複雜，因爲它是從幾個地方動態生成的，我正在創建一個試圖僅顯示與問題（或感知問題）相關的部分的示例。問題最終成爲數據元素名稱中的一個案例問題。當我生成標記時，我在名稱中使用了大寫字母，並且我不知道它是我正在使用的編程語言，還是瀏覽器，javascript或jquery，但它只在我在名稱中使用全部小寫字母。 – user1295718 2012-03-29 14:00:06

我也更正了例子 – user1295718 2012-03-29 14:00:58

如何循環表格元素並使用JQuery檢索數據元素？

回答

相關問題