How to get a table cell value using jQuery

Question

I am trying to get the td values using jQuery for a table I have no control over. There is an excellent example posted on this site, but it references one column not multiple ones within each tr.

I also don't have an id for the table or rows... only a class=columndata for the td.

$('#mytable tr').each(function() {
    var customerId = $(this).find("td").eq(2).html();    
}

will get the single td of a fixed tr?

Here is my table data:

<tr valign="top">
    <td class="columnaction" valign="center">
        <img src="../images/spacer.gif" width="1" height="1" />
        <a href="javascript:void(0);" class="columnactionlink" onclick="return doAccept('599577', '1', '','');" alt="Accept">Accept</a>
    </td>
    <td class="columndata">Message</td>
    <td class="columndata">Test</td>
    <td class="columndata"></td>
    <td class="columndata"></td>
    <td class="columndata">04/09/2011 23:59</td>
    <td class="columndata">04/09/2011</td>
    <td class="columndata">05/12/2011 07:00</td>
    <td class="columndata">05/13/2011 07:00</td>
    <td class="columndata"></td>
    <td class="columndata">Doe, Jeffrey A. (xx)</td>
    <td class="columndata">913014405580</td>
    <td class="columndata">Skip</td>
    <td class="columndata">04/09/2011 16:37</td>
    <td class="columndata">C</td>
    <td class="columndata">Doe,J</td>
    <td class="columndata">04/09/2011 16:37</td>
    <td class="columndata">04/09/2011 23:59</td>
    <td class="columndata">04/09/2011 16:34</td>
</tr>

Here is the reference to a similar question: How to get a table cell value using jQuery?

what in your example table are you trying to extract ? @jeff — mcgrailm, Apr 10 '11 at 13:50
Although the only thing that looks like an id is `913014405580`, which isn't the second `td` in your example, I'm gonna have to ask. Are you doing anything in `each(function(){});` ? Because the scope of the var might be influencing your result. — Khez, Apr 10 '11 at 13:52

score 5 · Answer 1 · answered Apr 10 '11 at 13:54

5

This is the selector you need:

$('#mytable tbody tr td:nth-child(2)')

answered Apr 10 '11 at 13:54

johnlemon

20,761
42
119
178

score 3 · Answer 2 · answered Apr 10 '11 at 14:12

As @danip pointed out int his statement you can directly access a TD via a valid CSS selector

$('#mytable tbody tr td:nth-child(2)')

a little description what he is doing here

he selects the table with id=mytable by addressing it with #mytable
then he goes down to the tbody of the table
he selects all trs of this table but futher defines
to select all tds under each tr
lastly he select from all these tds only the second on for each tr in the table!

you can iterate over the returned dom elements via each like here, and grab the HTML or Textcontent via html() or ()text

$('#mytable tbody tr td:nth-child(2)').each(function() {
   output += $(this).text();
});

see this jsfiddle to try it out yourself

http://jsfiddle.net/SdBBy/

Regards

score 3 · Answer 3 · answered Dec 26 '11 at 18:10

3

Out of the context here but might help you: if you have more than 100 or so rows, the above code will be a bit slower, a 1000 rows and performance will be much slower, in that case you can go with:

$('td:nth-child(2)', '#mytable') //$(selector, context)

and a for loop where you should first cache this object like

var items = $('td:nth-child(2)', '#mytable');
for(var i=0;i<items.length;i++)
{
    //your code
}

Regards, SJ

answered Dec 26 '11 at 18:10

Simranjit Singh

592
1
4
13

What if I wanted to get each column value for a given row (using the ID)? – Si8 Jul 14 '14 at 23:59

score 1 · Answer 4 · edited Dec 26 '11 at 15:29

1

use .text() instead of .html().

edited Dec 26 '11 at 15:29

answered Apr 10 '11 at 14:06

Anish

114
1
2
10

How to get a table cell value using jQuery

4 Answers4

Linked