jQuery each loop in table row

javascript jquery html-table each tablerow

435,739

Solution 1

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); */
});

Solution 2

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
  }
}

Solution 3

Use immediate children selector >:

$('#tblOne > tbody  > tr')

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

435,739

Author by

ANP

Updated on May 01, 2020

Comments

ANP about 4 years

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 about 12 years

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 about 12 years

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

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 about 12 years

@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.
Fabrizio Calderan about 12 years

@GNi33 it would be faster if you use document.querySelectorAll(''#tblOne > tbody > tr') instead :) - @riemon I suppose jQuery has some internal optimizations so in newer browser it calls native methods like that
Raynos about 12 years

@F.Calderan your joking / trolling / ignorant right? QSA is slow as hell, jQuery optimizes as hard as it can, it's still an order of magnitude slower then the DOM.
Florian Margaine about 12 years

Faster to write, maybe. Faster to run? You have to be kidding.
Fabrizio Calderan about 12 years

@Raynos sorry probably I'm misunderstanding what you're saying.
Raynos about 12 years

@F.Calderan your implying document.querySelectorAll('#tblOne > tbody > tr') is faster then document.getElementById("tblOne").rows which is simply stupid.
Fabrizio Calderan about 12 years

no, sorry I mean it's faster [but only to write]. It's obvious that second statement will be faster (as execution speed). just a misunderstanding :)
Raynos about 12 years

@F.Calderan What do you mean faster to write, the gEBI & .rows version is 11 characters shorter. Even id("tblOne").rows is still 8 characters smaller then $('#tblOne > tbody > tr')
Fabrizio Calderan about 12 years

@Raynos using QSA to me is just more immediate. It would be to me more natural use it, so it would be more faster to think and to write Ok? (Probably because I don't think to make an unnecessary optimization over a single selection)
Mike Cole almost 11 years

@Raynos please explain instead of "hit-and-running"...
NSjonas over 9 years

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.
Angry 84 over 9 years

By using QSA.... your throwing away cross browser support and limiting your website to newer browsers only... The only sad part about web development is this sort of stuff....
jumxozizi over 7 years

How do I refer to the tr element within the function?
FrenkyB almost 7 years

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