Javascript JQuery，选择表的第一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6924333/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery, select first row of table
提问by Harag
I've used JQuery to add a "image" button to a few rows in a table. I used the following code:
我使用 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);
}
}
});
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
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.
编辑：请在下面找到其中一个表格的副本，正如您在第 2 行看到的那样，我有一个“图表按钮”图像，这可以在 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>
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'twork:
我不确定为什么我需要所有孩子的电话，因为我确实先尝试了以下方法，但没有成功：
var $row = $(this).closest('table').children('tbody').children('tr:first td.ResultsHeader span.gridRCHders');
Thanks to everyone below for the help.
感谢下面大家的帮助。
回答by Alexander Varwijk
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, 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.
parent()只会得到直接的父母，closest应该在这里做我们想做的。来自 jQuery 文档：获取与选择器匹配的第一个祖先元素，从当前元素开始并向上遍历 DOM 树。
回答by bbqchickenrobot
late in the game , but this worked for me:
在比赛后期，但这对我有用：
$("#container>table>tbody>tr:first").trigger('click');
回答by Alex
This is a better solution, using:
这是一个更好的解决方案，使用：
$("table tr:first-child").has('img')
$("table tr:first-child").has('img')
回答by Yonatan Alexis Quintero Rodrig
jQuery is not necessary, you can use only javascript.
jQuery 不是必需的，您只能使用 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];
回答by Roger Gusmao
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.
实际上，如果您尝试使用函数“children”，它不会成功，因为表可能有第一个孩子，例如“th”。所以你必须改用函数'find'。
Wrong way:
错误的方法：
var $row = $(this).closest('table').children('tr:first');
Correct way:
正确做法：
var $row = $(this).closest('table').find('tr:first');
