JQuery, select first row of table

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 > 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 correc开发者_高级运维tly, 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 > 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.

 <table cellspacing="1" cellpadding="2" border="0" class="whiteBorder">
    <tbody>
        <tr>
            <td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">&nbsp;</span></td>
            <td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Jan</span></td>
            <td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Feb</span></td>
            <td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Mar</span></td>
            <td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Apr</span></td>
            <td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">May</span></td>
            <td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Jun</span></td>
            <td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Jul</span></td>
            <td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Aug</span></td>
            <td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Sep</span></td>
            <td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Oct</span></td>
            <td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Nov</span></td>
            <td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Dec</span></td>
            <td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Total</span></td>
        </tr>
        <tr class="lGreyBG">
            <td align="left" colspan="15">
                <span class="gridTXT"><b>KPI</b>&nbsp;<img width="20" alt="Chart" src="Images/chart_bar.png" id="c0_1" class="ChartButton"></span>
            </td>
        </tr>
        <tr class="lGreyBGalt">
            <td nowrap="" class="ResultsHeader"><span class="gridRCHders">Pre Conversion %</span></td>
            <td nowrap="" align="right"><span class="gridTXT"><i>65 %</i></span></td>
            <td nowrap="" align="right"><span class="gridTXT"><i>65 %</i></span></td>
            <td nowrap="" align="right"><span class="gridTXT"><i>66 %</i></span></td>
            <td nowrap="" align="right"><span class="gridTXT"><i>62 %</i></span></td>
            <td nowrap="" align="right"><span class="gridTXT"><i>67 %</i></span></td>
            <td nowrap="" align="right"><span class="gridTXT"><i>67 %</i></span></td>
            <td nowrap="" align="right"><span class="gridTXT"><i>68 %</i></span></td>
            <td nowrap="" align="right"><span class="gridTXT"><i>69 %</i></span></td>
            <td nowrap="" align="right"><span class="gridTXT"><i>0 %</i></span></td>
            <td nowrap="" align="right"><span class="gridTXT"><i>0 %</i></span></td>
            <td nowrap="" align="right"><span class="gridTXT"><i>0 %</i></span></td>
            <td nowrap="" align="right"><span class="gridTXT"><i>0 %</i></span></td>
            <td nowrap="" align="right"><span class="gridTXT"><i>66 %</i></span></td>
        </tr>           
    </tbody>
</table>

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.

---

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.

---

late in the game , but this worked for me:

$("#container>table>tbody>tr:first").trigger('click');

---

This is a better solution, using:

$("table tr:first-child").has('img')

---

Can't you use the first selector ?

something like: tr:first

---

jQuery is not necessary, you can use only javascript.

<table id="table">
  <tr>...</tr>
  <tr>...</tr>
  <tr>...</tr>
   ......
  <tr>...</tr>
</table>

The table object has a collection of all rows.

var myTable = document.getElementById('table');
var rows =  myTable.rows;
var firstRow = rows[0];

---

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');