Getting the 'co-ordinates' of a <TD> cell using jQuery

Question

I'm building somewhat of a different website, below is my HTML markup and my question. Please don't be put off by this wall of text, I'm sure it's really not a difficult problem for someone who know's their stuff but it takes some explaining.

<div id="0" class="cell" style="top: 0px; left: 0px;">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tbody>
            <tr id="0">
                <td id="0">&nbsp;</td>
                <td id="1">&nbsp;</td>
                <td id="2">&nbsp;</td>
                <td id="3">&nbsp;</td>
                <td id="4">&nbsp;</td>
                <td id="5">&nbsp;</td>
                <td id="6">&nbsp;</td>
                <td id="7">&nbsp;</td>
                <td id="8">&nbsp;</td>
                <td id="9">&nbsp;</td>
                <td id="10">&nbsp;</td>
                <td id="11">&nbsp;</td>
                <td id="12">&nbsp;</td>
                <td id="13">&nbsp;</td>
                <td id="14">&nbsp;</td>
                <td id="15">&nbsp;</td>
            </tr>
            <tr id="1">
                <td id="0">&nbsp;</td>
                <td id="1">&nbsp;</td>
                <td id="2">&nbsp;</td>
                <td id="3">&nbsp;</td>
                <td id="4">&nbsp;</td>
                <td id="5">&nbsp;</td>
                <td id="6">&nbsp;</td>
                <td id="7">&nbsp;</td>
                <td id="8">&nbsp;</td>
                <td id="9">&nbsp;</td>
                <td id="10">&nbsp;</td>
                <td id="11">&nbsp;</td>
                <td id="12">&nbsp;</td>
                <td id="13">&nbsp;</td>
                <td id="14">&nbsp;</td>
                <td id="15">&nbsp;</td>
            </tr>
        </tbody>
    </table>
</div>

This markup is repeated in a tiling sort of pastern in order to fill the entire page. A similar DIV might be:

<div id="1" class="cell" style="top: 144px; left: 0px;">
    <!-- The rest of the table code here... -->
</div>

If you can't see it already, I'm creating a load of cells across the entire page sorted into DIVs. Now, when a user clicks into a cell (one of the <td>'s), I want to get it's co-ordinates represented by: 0, 1, 5.

In this example, 0, 1, 5 is the DIV with id of 0, the TR element inside that DIV with the ID of 1, and lastly the cell inside that TR element with an ID of 5. I wanted to write a javascript function to get these co-ordinates, but I am at a complete loss on what parameters to pass, and little idea how I can get out the co-ordinates.

From as far as I can think once I can pass a click event(?) to the function I can look at the <td>'s parent elements and get their IDs?

If anyone can provide a solution to this problem or provide any input, it'd be greatly appreciated.

Answer 1

Since it is not valid to begin an ID with a number, I'll offer a different solution.

Since your IDs are basically index numbers, you can use jQuery's .index() method to get what you need.

Test it here: http://jsfiddle.net/hBarW/

$('td').click(function(){
    var $th = $(this);
    var td_idx = $th.index();
    var tr_idx = $th.closest('tr').index();
    var div_idx = $(this).closest('div').index();
    alert(td_idx + ' ' + tr_idx + ' ' + div_idx);
});

Answer 2

the easy thing would be

$('td').click(function(){
 $this = $(this);
 alert( $this.closest('div').attr('id') + ',' + $this.closest('tr').attr('id') + ',' + $this.attr('id'));
});

But you have some issues..

1. you cannot have numbers as IDs
2. IDs should be unique inside the DOM ...

Answer 3

try

$('td').click(function(){
   var td = this.id;
   var tr = $(this).closest('tr').attr('id');
   var div = $(this).closest('div').attr('id');
});

you can test it here.

more on .closest() here

Answer 4

Use the closest jQuery function, which returns the parent element that you specify.

Like this:

$("td").click(function () {
   var parentDIVId = $(this).closest("div").attr("id");
   var parentTRId = $(this).closest("tr").attr("id");
   var myId = $(this).attr("id");
}