How do I loop through table elements AND retrieve data elements using JQuery?

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.

I discovered my answer, was using the wrong case in my data-element. In my html it was data-Element, and I don't know if it is the browser, javascript, or jquery but data-Element was turned into data-element, so that when I called the var as I named it .data('Element') there was do data element by that name. Thanks for all the input, and I like the code that I've seen. But in this case it was a simple case error. — user1295718
– user1295718, Commented Mar 29, 2012 at 13:56

mbx-mbx · Accepted Answer · 2012-03-29 13:09:14Z

2

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)

answered Mar 29, 2012 at 13:09

mbx-mbx

1,77511 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pimvdb · Accepted Answer · 2012-03-29 13:05:07Z

1

Using .map and .get, you can map each tr into the element data attribute, so as to get an array of those values. As for the selector, an ID is the most straight-forward since it points directly to the tbody element, of which you want the tr descendants: 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

edited Mar 29, 2012 at 13:05

answered Mar 29, 2012 at 12:59

pimvdb

155k80 gold badges313 silver badges358 bronze badges

1 Comment

user1295718 Over a year ago

This isn't exactly what I was looking for however it does a wonderful job and I may end up changing the way I process the data to use this. Thank you.

lsl · Accepted Answer · 2012-03-29 13:09:15Z

1

Your logic/calls work for me, you have a few issues with syntax though, brackets after ('element');'s should be ('element')); and the selectors need to be quoted also, the tbody ones are missing should be ('tbody') etc.

The jsfiddle. (Note my replacement of alert to console.log calls)

Tested in chrome 17.

Is your code different from what is posted in the question?

answered Mar 29, 2012 at 13:09

lsl

4,4173 gold badges41 silver badges54 bronze badges

3 Comments

lsl Over a year ago

If you're still having issues let me know i'll update my answer as necessary.

user1295718 Over a year ago

Thank you for the help I found the solution, my html is remarkably more complex as it is dynamically generated from several places, I was putting up a sample that tried to only show the parts relevant to the problem (or the perceived problem). The problem ended up being a case issue in the data-element name. When I generated the mark up i was using a capital in the name, and I don't know if it is the programing language I'm using, or the browser, javascript, or jquery,... but it only worked when I used all lower case in the name.

lsl Over a year ago

good stuff, glad you got it fixed, my go to guess for what it was would be jquery

Collectives™ on Stack Overflow

How do I loop through table elements AND retrieve data elements using JQuery?

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related