JQuery,选择第一行表

Question

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

任何帮助都会很棒.谢谢

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

感谢以下所有人的帮助.

Answer 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 docs:获取与选择器匹配的第一个祖先元素,从当前元素开始并逐步向上遍历DOM树.

Answer 2

游戏后期,但这对我有用:

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

Answer 3

忽略这个! - 使用更新:

使用:contains() 类似的东西怎么样: $("tr:first:contains('img')") 作品一种享受 - http://jsfiddle.net/ajthomascouk/kQRj8/

UPDATE

这是一个更好的解决方案,使用:

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