Как подключить событие onclick для каждой ячейки таблицы в Javascript?

Question

Я думал, есть ли лучшее решение для добавления обработчика onclick для каждой ячейки в таблице, чем этот подход: Добавление события onclick в строку таблицы

Лучше, чемМне не нужно было бы устанавливать «cell.onclick = function» для каждой ячейки.

Мне просто нужно получить координаты ячейки, в которой щелкнул пользователь.

Спасибо!

РЕДАКТИРОВАТЬ: "координаты" означают 0x0 для верхней левой ячейки, 0x1 для второй ячейки в первой строке и т. Д.

Answer 1

Вы ищете это?

$(function(){
    $("#tableId tr td").click(function(event) {
       alert(event.pageX);
       alert(event.pageY);
    });
});

Если ячейки таблицы генерируются динамически:

$(function(){
    $("#tableId tr td").live('click', function(event) {
       alert(event.pageX);
       alert(event.pageY);
    });
});

.

Обновление на основе комментария OP:

Чтобы получить значения top и left, вы можете попробовать это:

$(function(){
    $("#tableId tr td").click(function(event) {
       alert($(this).offset().top);
       alert($(this).offset().left);
    });
});

Как показывает ваш другой комментарий, вы , вероятно, хотите получить идентификаторыячейка, по которой щелкнули, вы можете попробовать это:

$(function(){
    $("#tableId tr td").click(function(event) {
       alert($(this).attr('id'));
    });
});

Но для того, чтобы вышеописанное работало, предполагается, что все ячейки уже имеют атрибут id.

Answer 2

Вы ищете делегирование события.

http://icant.co.uk/sandbox/eventdelegation/

среди других примеров. В основном наблюдайте за более высоким контейнером, таким как таблица событий щелчка, а затем определите, хотите ли вы обработать его, проверив событие, переданное обработчику события.

Таким образом, если щелчок происходит внутри таблицы, вы можете определить цель события и предположить, что имеется действительный td подарок для обработки события.

Преимущество этого состоит в том, что вы можете динамически добавлять больше ячеек таблицы без необходимости добавлять обработчики ко всем из них.

jQuery, в частности, как отличный метод делегата для использования этого подхода. http://api.jquery.com/delegate/