JS / jQuery возвращает TH соответствующего TD, возможно?

Question

Мне нужно знать, возможно ли получить .html() определенного TH, когда у него нет идентификатора или класса, установленного с помощью селекторов jQuery.

Чтобы проиллюстрировать мой вопрос:

TABLE
    THEAD TR
        TH1 TH2 TH3
    TBODY TR
        TD1 TD2 TD3

Я установил $('table tbody tr td') функцию, которая при двойном щелчке превращает ячейку в поле ввода, а затем обратно в текст при размытии, отражая изменения, внесенные в ячейку через поле ввода.

Мне нужнобыть в состоянии знать, к какой колонке я обращаюсь.Поэтому, если кто-то дважды щелкнет TD2, я хочу, чтобы имя поля ввода содержало TH2.

Пожалуйста, дайте мне знать, как я могу это сделать, не устанавливая id / class для каждого TH или TD.

Answer 1

Если обработчик находится на вашем элементе <td>, то в вашем обработчике:

var th = $(this).closest('table').find('th').eq( this.cellIndex );

Ячейки таблицы поддерживают свои собственные индексные номера, доступные через свойство cellIndex.

Строки таблицы делают то же самое через rowIndex.

Методы jQuery:

• метод closest() ^{[документы]} для получения <table>

• метод find() ^{[документы]} для поиска вложенных <th> элементов

• метод eq() ^[docs] для уменьшения элементов <th> до одного с тем же индексом, что и <td>

Немного дальнейшего сокращения jQuery может выглядеть так:

var th = $(this).closest('table')[0].rows[0].cells[ this.cellIndex ];

Answer 2

Альтернативой jQuery решению Патрика может быть:

$("td").click(function()
{
    var $this = $(this);

    //Find the index of the column based on how many 
    //previous TDs there are.
    var col_idx = $this.prevAll("td").length;

    //Now select the Nth TH in the table using the base 1 column index.
    var $th = $("th:nth-child(" + (col_idx + 1) + ")", $this.closest("table"));

    /* your other code */
});

Answer 3

Как это

$('td').click(function(){
    cell = this.cellIndex;
    alert( $(this).closest('table').find('th:eq('+cell+')').text());
});