jQuery selecting each td in a tr

Question

I need a way to interact with each td element in a tr    To elaborate  I would like to access the first table row  then the first column  then the second column  etc  Then move onto the second row and repeat the process   Something like this  pseudo-code    for each row in table     for each column in row         do cool things         jQuery       tblNewAttendees tr   each function       alert  tr        Cool jquery magic that lets me iterate over all the td only in this row     magicSelector  each function        alert  hi                 HTML    lt table gt        lt thead gt             lt th gt someHeader lt  th gt        lt  thead gt        lt tbody gt             lt tr gt                  lt td gt want to grab this first lt  td gt                  lt td gt  this second  lt  td gt             lt  tr gt             lt tr gt                  lt td gt this third lt  td gt                  lt td gt this fourth lt  td gt             lt  tr gt        lt  tbody gt   lt  table gt

User · Accepted Answer

You can simply do the following inside your TR loop     this  find  td   each  function          do your cool stuff

User · Answer

expanding on the answer above the  each  function will return you the table-cell html object   wrapping that in     will then allow you to perform jquery actions on it     this  find  td   each  function  column  td        td  blah

User · Answer

tblNewAttendees tbody tr  each  index  tr   gt              console log tr             tr  children  td   each   index  td    gt                console log td                            You can use this tr and td parameter also

User · Answer

You don t need a jQuery selector at all  You already have a reference to the cells in each row via the cells property       tblNewAttendees tr   each function            each this cells  function            alert  hi                   It is far more efficient to utilize a collection that you already have  than to create a new collection via DOM selection   Here I ve used the jQuery each   docs  method which is just a generic method for iteration and enumeration

User · Answer

Fully example to demonstrate how jQuery query all data in HTML table  Assume there is a table like the following in your HTML code   lt table id  quot someTable quot  gt     lt thead gt       lt tr gt         lt td gt title 0 lt  td gt         lt td gt title 1 lt  td gt         lt td gt title 2 lt  td gt       lt  tr gt     lt  thead gt     lt tbody gt       lt tr gt         lt td gt row 0 td 0 lt  td gt         lt td gt row 0 td 1 lt  td gt         lt td gt row 0 td 2 lt  td gt       lt  tr gt       lt tr gt         lt td gt row 1 td 0 lt  td gt         lt td gt row 1 td 1 lt  td gt         lt td gt row 1 td 2 lt  td gt       lt  tr gt       lt tr gt         lt td gt row 2 td 0 lt  td gt         lt td gt row 2 td 1 lt  td gt         lt td gt row 2 td 2 lt  td gt       lt  tr gt       lt tr gt       lt  tr gt       lt tr gt       lt  tr gt               lt tr gt       lt  tr gt       lt tr gt         lt td gt row n td 0 lt  td gt         lt td gt row n td 1 lt  td gt         lt td gt row n td 2 lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt   Then  The Answer  the code to print all row all column  should like this     someTable tbody tr   each   tr idx tr    gt          tr  children  td   each   td idx  td    gt            console log       tr idx       td idx       gt        td  text                                   After running the code  the result will show  0 0    gt  row 0 td 0  0 1    gt  row 0 td 1  0 2    gt  row 0 td 2  1 0    gt  row 1 td 0  1 1    gt  row 1 td 1  1 2    gt  row 1 td 2  2 0    gt  row 2 td 0  2 1    gt  row 2 td 1  2 2    gt  row 2 td 2      n 0    gt  row n td 0  n 1    gt  row n td 1  n 2    gt  row n td 2  Summary  In the code  tr idx is the row index start from 0  td idx is the column index start from 0  From this double-loop code  you can get all loop-index and data in each td cell after comparing the Answer s source code and the output result

User · Answer

Your   magicSelector  could be    td   this    This will grab all td that are children of this  which in your case is each tr   This is the same as doing   this  find  td        td   this  each function        Logic

[javascript] jQuery: selecting each td in a tr

Examples related to javascript

Examples related to jquery