JQuery，选择表的第一行答案

【问题标题】：JQuery, select first row of tableJQuery，选择表的第一行
【发布时间】：2011-08-03 09:29:04
【问题描述】：

我使用 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);
        }
    }
});

基本上遍历表格的第一行并将单元格的值存储在类别数组中。我正在对现有网站进行更改，因此无法真正更改表格布局。

我注意到在某些页面上，显示了多个表格，我的图像按钮已正确添加，但我需要更改的是上面的代码以读取图像所在表格的第一行...我已经尝试了以下方法，但它似乎没有工作：

$("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);
            }
        }
    });
});

任何帮助都会非常有用。谢谢

H

编辑：请在下面找到其中一张表的副本，正如您在第 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">&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>

编辑： 终于让它工作了，下面是我必须使用它来获取第一行中正确数据的行...

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

感谢以下所有人的帮助。

【问题讨论】：

也许你可以给我们一些 HTML 来处理，在点击中指定你正在使用的 img 以及你想要选择的标签，这使我们能够更好地设置一个适合您的 jQuery 选择器
@Alexander Varwijk - 编辑帖子并添加到 HTML 表中，如前所述，我需要在第一行中阅读内容，在这种情况下，我需要将月份值存储到类别数组中。

标签： javascript jquery html

【解决方案1】：

好的，如果单击表格中的图像，您需要该图像所在表格的第一行的数据。

//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 文档：获取与选择器匹配的第一个祖先元素，从当前元素开始并向上遍历 DOM 树。

【讨论】：

我尝试只输入表的父部分，但这返回了父表，加上表的父表，所以我将它更改为 .parent('table')得到第一个父母，但这只是返回（）......奇怪。
正如在其他 cmets 中提到的，我尝试过最接近的，它确实返回了桌子，但是一旦我把孩子放在上面，它似乎什么都没有返回。
@harag 我不知何故没有收到您的评论通知。 .children 仅查找直接后裔，并且由于您在其中有一个 tbody（错过了抱歉），因此未发现 TR 为直接后裔。您可以使用 find() 代替，它在这种情况下也可以工作（例如 :last stackoverflow.com/questions/1318445/…) .children('tbody > tr:first') 也可以工作。
我想获取第一行，然后是该行除最后一行之外的所有列...我该如何实现？
简洁明了

【解决方案2】：

游戏后期，但这对我有用：

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

【讨论】：

没关系 - 它说明了如何获取相关元素的另一个示例。

【解决方案3】：

This is a better solution，使用：

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

【讨论】：

【解决方案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];

【讨论】：

【解决方案5】：

你不能使用first 选择器吗？

类似：tr:first

【讨论】：

我已尝试按照您的建议将代码中的过滤器更改为 tr:first，但它似乎没有重新调整任何元素。
@harag: 你在调试时有没有看到任何东西（例如使用 Firebug）>> 你可以尝试一些代码来查看它返回的内容，然后找到正确的选择器。因此，您将能够看到最好的代码是什么
我在以 "var currentTable = $(this).closest("tr")" 开头的行上放了一个断点，但是在运行该行之后，"currentTable" 变量只是说"jquery()"。
我试过 "var currentTable = $(this).closest("table").children("tr");"这不会返回任何内容，但是如果我省略子部分，它会返回表格元素。

【解决方案6】：

实际上，如果您尝试使用函数“children”，它不会成功，因为表可能有第一个孩子，如 'th'。所以你必须改用'find'函数。

错误的方式：

var $row = $(this).closest('table').children('tr:first');

正确方法：

 var $row = $(this).closest('table').find('tr:first');

【讨论】：

你也可以有 table > thead > tr 然后 table > tbody > tr。因此，您可能需要指定是想要来自 thead 还是 tbody 的第一行。 find('tr:first') 将选择标题中的 tr。