JQuery select first row of table

Question

I ve used JQuery to add a  image  button to a few rows in a table  I used the following code       tblResults tr nth-child 1  td ResultsHeader span gridRCHders   each function        var cat     trim   this  text         if cat length  gt  0           if cat toLowerCase       total                options xAxis categories push cat                         which basically goes through the first row of the table and stores the values of the cell in a categories array  I m making changes to an existing site so can t really change the table layout   What I have noticed is on some pages  more than one table is displayed  my image buttons are added in correctly  but what I need to change is the above code to read the first row of the table that the image is on    I ve tried the below but it doens t seem to be working      img ChartButton   click function        var currentTable     this  closest  tr   closest  table   filter  tr nth-child 1  td ResultsHeader span gridRCHders         options xAxis categories           currentTable each function            var cat     trim   this  text             if cat length  gt  0               if cat toLowerCase       total                    options xAxis categories push cat                                         Any help would be greatful  Thanks  H  EDIT  Please find below a copy of one of the tables  as you can see on row 2  I have a  ChartButton  image  This can be on any row from 2 onwards  and they can be more than one in the table  What I need to do is when the image is clicked that the data in row ONE of the current table  they could be more than one table on the page  is read in and saved in to the categories array  see above code   Hope this helps     lt table cellspacing  1  cellpadding  2  border  0  class  whiteBorder  gt       lt tbody gt           lt tr gt               lt td width  40  valign  bottom  align  left  class  ResultsHeader  colspan  1  rowspan  1  gt  lt span class  gridRCHders  gt  amp nbsp  lt  span gt  lt  td gt               lt td width  40  valign  bottom  align  left  class  ResultsHeader  colspan  1  rowspan  1  gt  lt span class  gridRCHders  gt Jan lt  span gt  lt  td gt               lt td width  40  valign  bottom  align  left  class  ResultsHeader  colspan  1  rowspan  1  gt  lt span class  gridRCHders  gt Feb lt  span gt  lt  td gt               lt td width  40  valign  bottom  align  left  class  ResultsHeader  colspan  1  rowspan  1  gt  lt span class  gridRCHders  gt Mar lt  span gt  lt  td gt               lt td width  40  valign  bottom  align  left  class  ResultsHeader  colspan  1  rowspan  1  gt  lt span class  gridRCHders  gt Apr lt  span gt  lt  td gt               lt td width  40  valign  bottom  align  left  class  ResultsHeader  colspan  1  rowspan  1  gt  lt span class  gridRCHders  gt May lt  span gt  lt  td gt               lt td width  40  valign  bottom  align  left  class  ResultsHeader  colspan  1  rowspan  1  gt  lt span class  gridRCHders  gt Jun lt  span gt  lt  td gt               lt td width  40  valign  bottom  align  left  class  ResultsHeader  colspan  1  rowspan  1  gt  lt span class  gridRCHders  gt Jul lt  span gt  lt  td gt               lt td width  40  valign  bottom  align  left  class  ResultsHeader  colspan  1  rowspan  1  gt  lt span class  gridRCHders  gt Aug lt  span gt  lt  td gt               lt td width  40  valign  bottom  align  left  class  ResultsHeader  colspan  1  rowspan  1  gt  lt span class  gridRCHders  gt Sep lt  span gt  lt  td gt               lt td width  40  valign  bottom  align  left  class  ResultsHeader  colspan  1  rowspan  1  gt  lt span class  gridRCHders  gt Oct lt  span gt  lt  td gt               lt td width  40  valign  bottom  align  left  class  ResultsHeader  colspan  1  rowspan  1  gt  lt span class  gridRCHders  gt Nov lt  span gt  lt  td gt               lt td width  40  valign  bottom  align  left  class  ResultsHeader  colspan  1  rowspan  1  gt  lt span class  gridRCHders  gt Dec lt  span gt  lt  td gt               lt td width  40  valign  bottom  align  left  class  ResultsHeader  colspan  1  rowspan  1  gt  lt span class  gridRCHders  gt Total lt  span gt  lt  td gt           lt  tr gt           lt tr class  lGreyBG  gt               lt td align  left  colspan  15  gt                   lt span class  gridTXT  gt  lt b gt KPI lt  b gt  amp nbsp  lt img width  20  alt  Chart  src  Images chart bar png  id  c0 1  class  ChartButton  gt  lt  span gt               lt  td gt           lt  tr gt           lt tr class  lGreyBGalt  gt               lt td nowrap    class  ResultsHeader  gt  lt span class  gridRCHders  gt Pre Conversion   lt  span gt  lt  td gt               lt td nowrap    align  right  gt  lt span class  gridTXT  gt  lt i gt 65   lt  i gt  lt  span gt  lt  td gt               lt td nowrap    align  right  gt  lt span class  gridTXT  gt  lt i gt 65   lt  i gt  lt  span gt  lt  td gt               lt td nowrap    align  right  gt  lt span class  gridTXT  gt  lt i gt 66   lt  i gt  lt  span gt  lt  td gt               lt td nowrap    align  right  gt  lt span class  gridTXT  gt  lt i gt 62   lt  i gt  lt  span gt  lt  td gt               lt td nowrap    align  right  gt  lt span class  gridTXT  gt  lt i gt 67   lt  i gt  lt  span gt  lt  td gt               lt td nowrap    align  right  gt  lt span class  gridTXT  gt  lt i gt 67   lt  i gt  lt  span gt  lt  td gt               lt td nowrap    align  right  gt  lt span class  gridTXT  gt  lt i gt 68   lt  i gt  lt  span gt  lt  td gt               lt td nowrap    align  right  gt  lt span class  gridTXT  gt  lt i gt 69   lt  i gt  lt  span gt  lt  td gt               lt td nowrap    align  right  gt  lt span class  gridTXT  gt  lt i gt 0   lt  i gt  lt  span gt  lt  td gt               lt td nowrap    align  right  gt  lt span class  gridTXT  gt  lt i gt 0   lt  i gt  lt  span gt  lt  td gt               lt td nowrap    align  right  gt  lt span class  gridTXT  gt  lt i gt 0   lt  i gt  lt  span gt  lt  td gt               lt td nowrap    align  right  gt  lt span class  gridTXT  gt  lt i gt 0   lt  i gt  lt  span gt  lt  td gt               lt td nowrap    align  right  gt  lt span class  gridTXT  gt  lt i gt 66   lt  i gt  lt  span gt  lt  td gt           lt  tr gt                  lt  tbody gt   lt  table gt    EDIT  Finally have it working  below is the line I had to use for it to get to the right data in the first row     var  row     this  closest  table   children  tbody   children  tr first   children  td ResultsHeader   children  span gridRCHders      I m not sure why I needed all the children calls  as I did try the following first which didn t work   var  row     this  closest  table   children  tbody   children  tr first td ResultsHeader span gridRCHders      Thanks to everyone below for the help

User · Answer

jQuery is not necessary  you can use only javascript    lt table id  table  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  table gt    The table object has a collection of all rows   var myTable   document getElementById  table    var rows    myTable rows  var firstRow   rows 0

User · Answer

Ok so if an image in a table is clicked you want the data of the first row of the table this image is in     image click stuff here     this      our image closest  table       Go upwards through our parents untill we hit the table children  tr first       Select the first row we find  var  row     this  closest  table   children  tr first      parent   will only get the direct parent  closest should do what we want here  From jQuery docs  Get the first ancestor element that matches the selector  beginning at the current element and progressing up through the DOM tree

User · Answer

This is a better solution  using      table tr first-child   has  img

User · Answer

Actually  if you try to use function  children  it will not be succesfull because it s possible to the table has a first child like  th   So you have to use function  find  instead   Wrong way   var  row     this  closest  table   children  tr first      Correct way    var  row     this  closest  table   find  tr first

User · Answer

Can t you use the first selector    something like  tr first

User · Answer

late in the game   but this worked for me        container gt table gt tbody gt tr first   trigger  click

[javascript] JQuery, select first row of table

The answer is

Examples related to javascript

Examples related to jquery

Examples related to html

Tags