Select top level columns from a table with nested tables using jquery

Question

I have the following html structure (which is generated and I can't change):

<table id='tableID'>
<tbody>
    <tr>
        <td>
            <table>...</table>
        </td>
        <td>
            <table>...</table>
        </td>
        <td>
            <table>...</table>
        </td>
    </tr>
    <tr>
        <td>
            <table>...</table>
        </td>
        <td>
            <table>...</table>
        </td>
        <td>
            <table>...</table>
        </td>
    </tr>
    ....
</tbody>
</table>

What i am trying to do is to get all the outer rows and for each column in the outer row manipulate the content. So I've got something like:

var rows = $("#tableID > tbody > tr");
$.each(rows, function(n, row)
{
     var columns = row.children("td");
     if (columns.length > 0) {
          $.each(columns, function (i, column)
          {
               //do stuff
          });
     }
});

The problem I'm having is that the when I get the child tds, it's too greedy and grabs tds from the nested tables too. Does anyone know how I can restrict this so that I only get the tds from the current row of the outer table? Or is there a better way of doing this?

PatrikAkerstrand · Accepted Answer · 2009-05-28 17:49:28Z

4

var rows = $("#tableID > tbody > tr");
rows.each(function(n, row)
{
     $(row).children().each( // td implicit, since tr should only contain td
        function (i, column) {
           //do stuff
           // Note, if you don't need a reference to row inside the function,
           // you can loop directly over the tds by adding > td to the first
           // selector and skip the outer loop.
        });
     }
});

edited May 28, 2009 at 17:49

answered May 28, 2009 at 16:22

PatrikAkerstrand

45.8k12 gold badges82 silver badges94 bronze badges

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

3 Comments

ichiban Over a year ago

@Machine - There's a syntax error in your code. "columns" is undefined.

PatrikAkerstrand Over a year ago

Oh yeah, forgot to remove that part when I removed unneccessary variables. thanks. Fixed now

Temple Over a year ago

I marked this answer correct as i wanted the reference to the outer cell.

ichiban · Accepted Answer · 2009-05-28 16:18:52Z

3

You may be looping twice unnecessarily. If the idea is to modify each cell that's not part of a nested table, this should work.

var cells = $("#tableID > tbody > tr > td");
$.each(cells, function(n, cell){     
   //do stuff          
});

answered May 28, 2009 at 16:18

ichiban

6,2103 gold badges30 silver badges34 bronze badges

Collectives™ on Stack Overflow

Select top level columns from a table with nested tables using jquery

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related