Question

I am going to create a selection ‘lasso’ that the user can use to select portions of a table. I figured that positioning a div over the region is far easier than trying to manipulate the cell borders.

If you don’t understand what I mean, open up a spread sheet and drag over a region. I want the div to align perfectly with the cell borders.

I have a very good idea of how to do this, but how would I get the (x,y) coordinates (screen position) of a table cell (td)?

Answer 1

Use .offset() along with .height() and .width() if necessary.

var td = $(someTDReference);
var pos = td.offset();
pos.bottom = pos.top + td.height();
pos.right = pos.left + td.width();
// pos now contains top, left, bottom, and right in pixels

Edit: Not .position(), use .offset(). Updated above.

Edit: Changed pos.width() to td.width()