235

I am trying to work out how to get the value of table cell for each row using jQuery.

My table looks like this:

<table id="mytable">
  <tr>
    <th>Customer Id</th>
    <th>Result</th>
  </tr>
  <tr>
    <td>123</td>
    <td></td>
  </tr>
  <tr>
    <td>456</td>
    <td></td>
  </tr>
  <tr>
    <td>789</td>
    <td></td>
  </tr>
</table>

I basically want to loop through the table, and get the value of the Customer Id column for each row.

In the code below I have worked out that I need to do this to get it looping through each row, but I'm not sure how to get the value of the first cell in the row.

$('#mytable tr').each(function() {
    var cutomerId = 
}
0

9 Answers 9

339

If you can, it might be worth using a class attribute on the TD containing the customer ID so you can write:

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

Essentially this is the same as the other solutions (possibly because I copy-pasted), but has the advantage that you won't need to change the structure of your code if you move around the columns, or even put the customer ID into a <span>, provided you keep the class attribute with it.

By the way, I think you could do it in one selector:

$('#mytable .customerIDCell').each(function() {
  alert($(this).html());
});

If that makes things easier.

5
  • 4
    I would say $('#mytable td.customerIDCell').each(function() { alert($(this).html()); }); but +1 Commented Dec 17, 2008 at 21:56
  • :-) thanks - but what if you want to put it into a span (I may have badly formatted the span in my answer!)
    – Jennifer
    Commented Dec 17, 2008 at 21:57
  • 2
    Using the class on the tr is especially helpful if you happen to have <td> within a <tfoot> (or are using <td> instead of <th>) and don't want those.
    – Frank Luke
    Commented May 30, 2012 at 16:33
  • $('#mytable tr').each(function() { var customerId = $(this).find(".customerIDCell").html(); }); Commented Jun 24, 2012 at 8:41
  • but if i want to get the tr html also then what we can do
    – Developer
    Commented Jun 4, 2014 at 12:43
159
$('#mytable tr').each(function() {
    var customerId = $(this).find("td:first").html();    
});

What you are doing is iterating through all the trs in the table, finding the first td in the current tr in the loop, and extracting its inner html.

To select a particular cell, you can reference them with an index:

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

In the above code, I will be retrieving the value of the third row (the index is zero-based, so the first cell index would be 0)


Here's how you can do it without jQuery:

var table = document.getElementById('mytable'), 
    rows = table.getElementsByTagName('tr'),
    i, j, cells, customerId;

for (i = 0, j = rows.length; i < j; ++i) {
    cells = rows[i].getElementsByTagName('td');
    if (!cells.length) {
        continue;
    }
    customerId = cells[0].innerHTML;
}

5
  • 1
    Thanks, this was more useful to me as I don't have control on the markup of the document I wish to parse using jQuery. So being able to use "td:first", "td:last", etc was a great help.
    – atomicules
    Commented Jul 16, 2010 at 9:33
  • 1
    eq(2) would get value of third column, not third row.
    – live-love
    Commented Oct 23, 2012 at 16:23
  • What is eq(2) in your code ? I mean 2 is index of which td or tr ? Commented Sep 26, 2014 at 11:08
  • @Singh The element at index 2 of the td collection returned by the find("td") function. Commented Jun 16, 2015 at 18:54
  • I like option 2 with the index as ref, my fiddle here
    – HattrickNZ
    Commented Dec 18, 2015 at 0:46
22

a less-jquerish approach:

$('#mytable tr').each(function() {
    if (!this.rowIndex) return; // skip first row
    var customerId = this.cells[0].innerHTML;
});

this can obviously be changed to work with not-the-first cells.

9
$('#mytable tr').each(function() {
  // need this to skip the first row
  if ($(this).find("td:first").length > 0) {
    var cutomerId = $(this).find("td:first").html();
  }
});
1
  • 2
    There's no need to skip the first row, because it contains <th>, not <td>, so their data won't be extracted Commented Dec 17, 2008 at 21:32
8

Try this,

$(document).ready(function(){
$(".items").delegate("tr.classname", "click", function(data){
            alert(data.target.innerHTML);//this will show the inner html
    alert($(this).find('td:eq(0)').html());//this will alert the value in the 1st column.
    });
});
1
  • 1
    of the second element, not the first one, eq starts at 0 Commented May 10, 2016 at 15:48
4

This works

$(document).ready(function() {
    for (var row = 0; row < 3; row++) {
        for (var col = 0; col < 3; col++) {
            $("#tbl").children().children()[row].children[col].innerHTML = "H!";
        }
    }
});
3

try this :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>

<script type="text/javascript"><!--

function getVal(e) {
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;

    alert(targ.innerHTML);
}

onload = function() {
    var t = document.getElementById("main").getElementsByTagName("td");
    for ( var i = 0; i < t.length; i++ )
        t[i].onclick = getVal;
}

</script>



<body>

<table id="main"><tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
</tr><tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
</tr><tr>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
</tr></table>

</body>
</html>
2
$(document).ready(function() {
     var customerId
     $("#mytable td").click(function() {
     alert($(this).html());
     });
 });
2

A working example: http://jsfiddle.net/0sgLbynd/

<table>
<tr>
    <td>0</td>
    <td class="ms-vb2">1</td>
    <td class="ms-vb2">2</td>
    <td class="ms-vb2">3</td>
    <td class="ms-vb2">4</td>
    <td class="ms-vb2">5</td>
    <td class="ms-vb2">6</td>
</tr>
</table>


$(document).ready(function () {
//alert("sss");
$("td").each(function () {
    //alert($(this).html());
    $(this).html("aaaaaaa");
});
});

Not the answer you're looking for? Browse other questions tagged or ask your own question.