Question

I was thinking if there’s a better solution for adding onclick handler to each cell in a table than this approach: Adding an onclick event to a table row

Better in the way that I wouldn’t need to set “cell.onclick = function” for each cell.

I just need to get the coordinations of a cell where user clicked.

Thanks!

EDIT: The “coordinations” mean 0x0 for top-left cell, 0x1 for second cell in the first row etc.

Answer 1

Are you looking for this?

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

In case your table cells are generated dynamically:

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

.

Update Based On OP Comment:

To get top and left values you could try this:

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

As your other comment shows, you are probably looking to get the IDs of the clicked cell, you may try this:

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

But for the above to work, it is assumed that all cells already have an id attribute.