JQuery，选择表的第一行 [英] JQuery, select first row of table

问题描述

我使用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开始的任何一行上，并且它们可以在表格中多于一个。我需要做的是当单击图像时，当前表的第一行（它们可能是多于一个表的页面）中的数据被读入并保存到categories数组（参见上面的代码）。希望这有帮助。

 < table cellspacing =1cellpadding =2border =0class =whiteBorder > 
< tbody> 
< tr> 
< td width =40valign =bottomalign =leftclass =ResultsHeadercolspan =1rowspan =1>< span class =gridRCHders>& amp ; NBSP;< /跨度>< / TD> 
< td width =40valign =bottomalign =leftclass =ResultsHeadercolspan =1rowspan =1>< span class =gridRCHders> Jan< ; /跨度>< / TD> 
< td width =40valign =bottomalign =leftclass =ResultsHeadercolspan =1rowspan =1>< span class =gridRCHders> Feb< ; /跨度>< / TD> 
< td width =40valign =bottomalign =leftclass =ResultsHeadercolspan =1rowspan =1>< span class =gridRCHders> Mar< ; /跨度>< / TD> 
< td width =40valign =bottomalign =leftclass =ResultsHeadercolspan =1rowspan =1>< span class =gridRCHders> Apr< ; /跨度>< / TD> 
< td width =40valign =bottomalign =leftclass =ResultsHeadercolspan =1rowspan =1>< span class =gridRCHders> May< ; /跨度>< / TD> 
< td width =40valign =bottomalign =leftclass =ResultsHeadercolspan =1rowspan =1>< span class =gridRCHders> Jun< ; /跨度>< / TD> 
< td width =40valign =bottomalign =leftclass =ResultsHeadercolspan =1rowspan =1>< span class =gridRCHders> Jul< ; /跨度>< / TD> 
< td width =40valign =bottomalign =leftclass =ResultsHeadercolspan =1rowspan =1>< span class =gridRCHders> Aug< ; /跨度>< / TD> 
< td width =40valign =bottomalign =leftclass =ResultsHeadercolspan =1rowspan =1>< span class =gridRCHders> Sep< ; /跨度>< / TD> 
< td width =40valign =bottomalign =leftclass =ResultsHeadercolspan =1rowspan =1>< span class =gridRCHders> Oct< ; /跨度>< / TD> 
< td width =40valign =bottomalign =leftclass =ResultsHeadercolspan =1rowspan =1>< span class =gridRCHders> Nov< ; /跨度>< / TD> 
< td width =40valign =bottomalign =leftclass =ResultsHeadercolspan =1rowspan =1>< span class =gridRCHders> Dec< ; /跨度>< / TD> 
< td width =40valign =bottomalign =leftclass =ResultsHeadercolspan =1rowspan =1>< span class =gridRCHders> Total< ; /跨度>< / TD> 
< / tr> 
< tr class =lGreyBG> 
< td align =leftcolspan =15> 
< span class =gridTXT>< b> KPI< / b>& nbsp;< img width =20alt =Chartsrc =Images / chart_bar.pngid =c0_1class =ChartButton>< / span> 
< / td> 
< / tr> 
< tr class =lGreyBGalt> 
< td nowrap =class =ResultsHeader>< span class =gridRCHders>预先转换％< / 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 = $（ 。。此）.closest（ '表'）的儿童（ 'TBODY'）的儿童（ 'TR：第一'）的儿童（ 'td.ResultsHeader'）的儿童（ 'span.gridRCHders'）; 
  

我不确定为什么我需要所有的子女电话，因为我之前首先尝试了没有工作：

  var $ row = $（this）.closest（'table' ）.children（'tbody'）。children（'tr：first td.ResultsHeader span.gridRCHders'）; 
  

感谢下面所有人的帮助。

解决方案

好的，如果点击了表格中的图片，则需要该图片所在表格的第一行数据。

  //图片点击这里的商品{
 $（this）。 //我们的图片
最接近（'table'）。 //向上通过我们的父母，直到我们碰到桌子
 children（'tr：first'）; //选择我们找到的第一行
 
 var $ row = $（this）.closest（'table'）。children（'tr：first'）; 
  

parent（）父母，最接近应该做我们想要的。
从jQuery文档中：获取匹配选择器的第一个祖先元素，从当前元素开始，并通过DOM树进行。

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">&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>

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.

解决方案

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, 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.

这篇关于JQuery，选择表的第一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！