JQuery, выберите первую строку таблицы

Я использовал 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);
            }
        }
    });
});

Любая помощь будет полезна. Благодаря

Н

EDIT: Ниже приведена копия одной из таблиц, как вы можете видеть в строке 2, у меня есть изображение "ChartButton", которое может быть в любой строке от 2 до, и они могут быть более одного в таблице. Что мне нужно сделать, так это когда щелкнуть изображение, что данные в строке ONE текущей таблицы (они могут быть более одной таблицы на странице) считываются и сохраняются в массив категорий (см. Выше код). Надеюсь, это поможет.

 <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: Наконец, он работает, ниже строка, которую я должен был использовать для получения правильных данных в первой строке...

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

Спасибо всем за помощь.

Ответы

Ответ 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.

Ответ 2

в конце игры, но это сработало для меня:

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

Ответ 4

Не можете ли вы использовать селектор first?

что-то вроде: tr:first

Ответ 5

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];

Ответ 6

На самом деле, если вы попытаетесь использовать функцию "дети", это не будет успешным, потому что в таблице может быть первый ребенок, такой как "th". Поэтому вы должны использовать функцию "найти".

Неправильно:

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

Правильный способ:

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