jQuery each loop in table row [duplicate]

Question

I am having something like:

<table id="tblOne">
            <tbody>
                <tr>
                    <td>
                        <table id="tblTwo">
                            <tbody>
                                <tr>
                                    <td>
                                        Items
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Prod
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        Item 1
                    </td>
                </tr>
                <tr>
                    <td>
                        Item 2
                    </td>
                </tr>
            </tbody>
        </table>

I have written jQuery to loop through each tr like:

$('#tblOne tr').each(function() {...code...});

But problem is that it loops through the "tr" of "tblTwo" also which I don't want. Can anyone please suggest something to solve this?

Fabrizio Calderan · Accepted Answer · 2020-05-01 08:09:16Z

260

In jQuery just use:

$('#tblOne > tbody  > tr').each(function() {...code...});

Using the children selector (>) you will walk over all the children (and not all descendents), example with three rows:

$('table > tbody  > tr').each(function(index, tr) { 
   console.log(index);
   console.log(tr);
});

Result:

0
<tr>
1 
<tr>
2
<tr>

In VanillaJS you can use document.querySelectorAll() and walk over the rows using forEach()

[].forEach.call(document.querySelectorAll('#tblOne > tbody  > tr'), function(index, tr) {
    /* console.log(index); */
    /* console.log(tr); */
});

edited May 1, 2020 at 8:09

answered May 3, 2012 at 13:05

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

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

3 Comments

Mike Cole Over a year ago

@Raynos please explain instead of "hit-and-running"...

jumxozizi Over a year ago

How do I refer to the tr element within the function?

FrenkyB Over a year ago

@Rubiksmomo - use function(index, element) - api.jquery.com/each

rlemon · Accepted Answer · 2013-02-20 20:22:24Z

75

Just a recommendation:

I'd recommend using the DOM table implementation, it's very straight forward and easy to use, you really don't need jQuery for this task.

var table = document.getElementById('tblOne');

var rowLength = table.rows.length;

for(var i=0; i<rowLength; i+=1){
  var row = table.rows[i];

  //your code goes here, looping over every row.
  //cells are accessed as easy

  var cellLength = row.cells.length;
  for(var y=0; y<cellLength; y+=1){
    var cell = row.cells[y];

    //do something with every cell here
  }
}

edited Feb 20, 2013 at 20:22

rlemon

17.7k14 gold badges95 silver badges126 bronze badges

answered May 3, 2012 at 13:14

GNi33

4,5092 gold badges33 silver badges45 bronze badges

14 Comments

Fabrizio Calderan Over a year ago

I agree that jQuery is often not really necessary for this kind of task (especially on newer browser with .querySelectorAll()) but if you're already including jQuery it's a waste not to use it (and DOM solution with two for loop is not so straightforward, imho)

Raynos Over a year ago

But if you're already including jQuery then your doing it wrong and need to remove it ASAP

rlemon Over a year ago

using jQuery also has consequences. $() does about 100 things before it actually selects your element by it's id (as an example) . I'm not saying don't use it... but for trivial things like this where the vanilla js solution is like a few characters more to write you're saving on processing. albeit not much... but why do 10 000/second when you can do 10 000 000.... just makes sense no?

GNi33 Over a year ago

@F.Calderan I understand what you mean, but like i said, it's a recommendation, because it's very straigth forward. something like accidentaly selecting more tables won't happen here and the iteration with a for-loop is pretty fast.

NSjonas Over a year ago

I had code that was using JQuery to do simple text searching in tables. With 6000+ rows it was noticeably laggy. Changed it to use regular JS and it was 10 fold faster.

|

Sarfraz · Accepted Answer · 2012-05-03 13:07:02Z

22

Use immediate children selector >:

$('#tblOne > tbody  > tr')

Description: Selects all direct child elements specified by "child" of elements specified by "parent".

answered May 3, 2012 at 13:07

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

Collectives™ on Stack Overflow

jQuery each loop in table row [duplicate]

3 Answers 3

3 Comments

14 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

14 Comments

Comments

Linked

Related