Question

I have an html table that looks like this in a standard HTML 4.01 Transitional page:

<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>

I want to loop through all the rows and get the “data” in the data-element field and place it in a variable using JQuery. I have tried a number of variations of .children(), .data(), and .each() but have not been able to retrieve the “data” elements.

I have tried (inside a $(document).ready() block…):

$('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
});

Any help is welcome. I am using HTML 4.01, and JQuery 1.7.1. I have been testing in Firefox, but need to support the other standard browser Firefox, Opera, Safari, Chrome, and IE8+.

(Edited for minor syntax changes)

The actual problem was a case issue, please see comment below. Issue RESOLVED.

Answer 1

This works for me:

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

​

http://jsfiddle.net/LBKvm/

(it may not be the most efficient way however)