Acess the table data <td> row by row <tr> individually

Question

I need to make changes to the DOM. I need to present the table content using paragaraphs or something like that. For that I need to get the data per each row of table. How can I do this?

HTML example:

<table style="width:300px">
    <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>94</td>
    </tr>
</table>

Output should be something like this - Jill Smith 50 and Eve Jackson 94

I have written something like this, but it goes through all the <td> tags in the web page. Not row wise.

 $("table").each(function() {
    $("tr").each(function(){
        $("td").each(function(){                
            label = $('td').text(); 
        });         
    alert(label);
 });

Answer 1

You can use each() to iterate through rows and then cells

Live Demo

$("table tr").each(function(){
  text = "";
  $(this).find('td').each(function(){
     text += $(this).text() + " ";      
  });
    alert(text);
});

Answer 2

Try,

var groupedVales = [];

$('table tr').each(function(){
  groupedVales[groupedVales.length] = 
          $(this).find('td').map(function(){ $(this).text(); }).get().join(' ');
});

Now the groupedvales contains elements which will be grouped as per your expectations

DEMO