我已经使用JQuery将“图像”按钮添加到表格中的几行。我使用了以下代码：
$("#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);
}
}
});
基本上遍历表的第一行，并将单元格的值存储在categories数组中。我正在对现有网站进行更改，因此无法真正更改表格布局。
我注意到在某些页面上，显示了多个表格，我的图像按钮被正确添加，但我需要更改的是上面的代码来读取图像所在表格的第一行...我已经尝试了以下但它似乎没有工作：
$("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);
}
}
});
});
任何帮助都会很棒。感谢
ħ
编辑： 请在下面找到其中一个表的副本，如第2行所示，我有一个“ChartButton”图像，这可以是从2开始的任何行，并且它们可以在表格中不止一个。我需要做的是当单击图像时，读入当前表的第一行中的数据（它们可能是页面上的多个表）并将其保存到类别数组中（参见上面的代码）。希望这会有所帮助。
<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>
修改 最后让它工作，下面是我必须使用它来获取第一行中正确数据的行......
var $row = $(this).closest('table').children('tbody').children('tr:first').children('td.ResultsHeader').children('span.gridRCHders');
我不确定为什么我需要所有的孩子电话，因为我确实尝试了以下第一个没有工作：
var $row = $(this).closest('table').children('tbody').children('tr:first td.ResultsHeader span.gridRCHders');
感谢以下所有人的帮助。
答案 0 :(得分：32)
好的，如果单击表格中的图像，则需要该图像所在表格第一行的数据。
//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()只会获得直接父级，closest应该在此处执行我们想要的操作。
来自jQuery docs：获取与选择器匹配的第一个祖先元素，从当前元素开始并逐步向上遍历DOM树。
答案 1 :(得分：11)
游戏后期，但这对我有用：
$("#container>table>tbody>tr:first").trigger('click');
答案 2 :(得分：5)
忽略这一点！ - 使用更新：
使用:contains()怎么样
就像是：
$("tr:first:contains('img')")
是一种享受 - http://jsfiddle.net/ajthomascouk/kQRj8/
<强>更新
$("table tr:first-child").has('img')
答案 3 :(得分：4)
jQuery没有必要，你只能使用javascript。
<table id="table">
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
......
<tr>...</tr>
</table>
表对象包含所有行的集合。
var myTable = document.getElementById('table');
var rows = myTable.rows;
var firstRow = rows[0];
答案 4 :(得分：3)
你不能使用first选择器吗？
类似于：tr:first
答案 5 :(得分：2)
实际上，如果你试图使用“儿童”这个功能，它就不会成功，因为桌子上有第一个像'th'这样的孩子。所以你必须使用'find'功能。
错误的方式：
var $row = $(this).closest('table').children('tr:first');
正确的方式：
var $row = $(this).closest('table').find('tr:first');