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.
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.
Share Improve this question edited Aug 3, 2011 at 11:00 Harag asked Aug 3, 2011 at 9:29 HaragHarag 1,5824 gold badges19 silver badges31 bronze badges 2- Maybe you could give us some HTML to work with, specifying what the img is you're working from in the click and what is the tag you want to select, this allows us to better set up a jQuery selector for you – Alexander Varwijk Commented Aug 3, 2011 at 9:46
- @Alexander Varwijk - Edited the post and added in the HTML table, as mentioned I need to read in the first row, what In this case, I need to store the month values into the categories array. – Harag Commented Aug 3, 2011 at 10:14
6 Answers
Reset to default 41Ok 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');