Getting The 'co-ordinates' Of A Cell Using JQuery

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 fo

Solution 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);
});

Solution 2:

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");
}

Solution 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

Solution 4:

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 ...