Using jQuery how to select each td in a tr, table by table

Question

In my interface I have multiple tables. I want to go to each “td” in a “tr” table by table. If I use this way, code can't identify tables,

$(function() {
    $('tr').each(function() {
        // For each row
        $(this).find('td').each(function(i) {
           // code to be execute 
        });

    });
});

It works like this, execute first column in all tables and then go to second column. I want to do this, execute first column in first table then go to second column in first table and execute second table as first table

This is happens with above code

This is what I want to do

Can someone please help me to do that, thank you...

Answer 1

You can do something like this using the index of table and column

 $(function() { $('table').each(function(ind) { $(this).find('tr').each(function() { $(this).find('td').each(function(i) { $(this).text(ind * 2 + i + 1); }); }); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> <table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> 

Also You can do the following if column count is different

 $(function() { var i = 1; $('table').each(function(ind) { $table = $(this); $(this).find('tr:first').each(function() { $(this).find('td').each(function(i1) { $table.find('tr td:nth-child(' + (i1 + 1) + ')').text(i++); }); }); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> <table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> <table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> 

Answer 2

Change your selector to select each td. $("tr td").each(fn...

Answer 3

You need to use nested each like:

$(function() {
    $('table').each(function() {

        $(this).find('tr').each(function(i) {
               $(this).find('td').each(function(i) {
                        // code to be execute 
                });
        });

    });
})

;