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 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 > 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"> </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> <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.
parent()will only get the direct parent,closestshould 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.