Блог

Главная - Вопросы по программированию - Способ получить параметр таблицы

Способ получить параметр таблицы

#jquery

#jquery

Вопрос:

У меня есть таблица HTML, и мне нужно получить параметр ячейки, на которую я нажимаю, с помощью jQuery. Как мне это сделать?

Мне нужно получить 3-ю строку, 4-й столбец. Вот что у меня есть до сих пор

 var tr = $(this).parent();
for (var i = 0; i < tr.children().length; i  ) {
    if (tr.children().get(i) == this) {
        var row = i   1;
        break;
    }
}

Комментарии:

1. Пожалуйста, не пишите все заглавными буквами. Это затрудняет чтение. Спасибо! Кроме того, ваша проблема, по-видимому, решаема путем привязки (или делегирования) обработчика события щелчка к каждой ячейке. Взгляните на документацию jQuery.

Ответ №1:

Вы могли бы сделать:

 $('td').click(function(){
   var tr = $(this).closest('tr');
    var column = $(this).index() 1;
    var row = tr.index() 1;
    alert("you clicked row:" row " column:" column);
});

скрипка здесь: http://jsfiddle.net/YA6WY /

Комментарии:

1. Обратите внимание, что index() получает положение элемента относительно его родительского элемента. Если таблица содержит несколько <tbody> <thead> элементов или, index() может не вернуть требуемый результат.

Ответ №2:

Вы можете получить доступ cellIndex rowIndex к свойствам and <td> для and <tr> соответственно. Очень просто:

 $('table').delegate('td', 'click', function (evt) {
    var td = evt.target,
        row = td.parentNode.rowIndex;
        col = td.cellIndex;

    alert("Row: " row ", Column: " col); 
});

Рабочая демонстрация: http://jsfiddle.net/AndyE/T4u93 /

Использование delegate() для привязки вашего обработчика событий повышает производительность, добавляя к <table> элементу одно событие, которое фиксирует все щелчки по ячейкам. event.target выдает нам элемент, который сгенерировал щелчок ( <td> в данном случае элемент).