Coordinates of HTML elements

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 fa开发者_如何学编程r 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)?

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()

Hey you should be able to do it like this (jsFiddle): http://jsfiddle.net/jackrugile/YKHkX/

$('td').hover(function(){
    var xPos = Math.floor($(this).offset().left);
    var yPos = Math.floor($(this).offset().top);
});

The Math.floor gets rid of the crazy decimals and makes it easier to work with in my opinion. Hope that helps!

you can use pageX and pageY to trackdown the mouse cursor x , y

$("#your_div").mouseover(function(e))
{
    x = e.pageX;
    y = e.pageY;
}

you can set the div border to highlight the div on mouseover simply by

$("#your_div").css("border","1px solid black");

this will kinda show current div selectable effect...

that if if the div is

position:fixed and then you can read its left and top property

hope that helps you

For those who doesn't want to use jquery:

var coordinates = td.getBoundingClientRect();
console.log(coordinates.left, coordinates.top, coordinates.right, coordinates.bottom);