ansaurus

Question

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

Answer 1

A:

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

RPM1984 2010-07-01 01:23:24

yeah! great minds.. just that you don't need jquery to get the id of the `this`, simply do `this.id`... much better.. ;) and you miss one `)` at the end.

Reigel 2010-07-01 01:29:24

true. just kept it like that for consistency to OP

RPM1984 2010-07-01 01:30:54

This works perfectly, minus a small syntax error which I fixed myself :D Thank you so much!

VIVA LA NWO 2010-07-01 01:31:05

pleasure. =) You should address the issues that Gaby has mentioned below though..

RPM1984 2010-07-01 01:33:17

Answer 2

A:

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

Reigel 2010-07-01 01:23:33

lolz, great minds. i beat you to the punch though!

RPM1984 2010-07-01 01:25:07

Answer 3

A:

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

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

Gaby 2010-07-01 01:27:11

I'm not worried about valid markup, so I don't mind having duplicate ID's within the DOM :)

VIVA LA NWO 2010-07-01 01:33:47

@VIVA LA NWO If you don't care about writing accurate code, why do you post here?

Doug Neiner 2010-07-01 01:46:02

Answer 4

+1 A:

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

patrick dw 2010-07-01 01:41:36

Great answer Patrick, +1. I also found out there is a `cellIndex` and `rowIndex`: `var td_idx = this.cellIndex, tr_idx = this.parentNode.rowIndex`

Doug Neiner 2010-07-01 01:52:00

@Doug - Wow, that's great! I didn't know that. Thanks for the info. :o) Here's an update using those properties: http://jsfiddle.net/hBarW/2/

patrick dw 2010-07-01 02:00:18

@patrick, sweet! When I found out about it I was like "AWESOME!" :)

Doug Neiner 2010-07-01 02:01:29

ansaurus

tags:

views:

answers:

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

related questions