Question

我将创建一个选择'套索'，用户可以使用它来选择表格的某些部分。我认为在区域上定位div比尝试操作单元格边界容易得多。

如果您不明白我的意思，请打开电子表格并拖动某个区域。我希望div与单元格边界完美对齐。

我非常清楚如何做到这一点，但如何获得表格单元格（td）的（x，y）坐标（屏幕位置）？

Answer 1

如有必要，请使用.offset()以及.height()和.width()。

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

编辑：不 ~~.position()~~ ，请使用.offset()。更新如上。

修改：将pos.width()更改为td.width()

Answer 2

嘿，你应该能够这样做（jsFiddle）：http://jsfiddle.net/jackrugile/YKHkX/

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

Math.floor摆脱了疯狂的小数，并且在我看来更容易使用。希望有所帮助！

Answer 3

您可以使用pageX和pageY来跟踪鼠标光标x，y

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

您可以设置div边框，只需通过

突出显示鼠标悬停时的div

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

这将显示当前的div可选效果......

如果div是

位置：固定，然后您可以读取其左侧和顶部属性

希望能帮到你

Answer 4

对于那些不想使用jquery的人：

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

HTML元素的坐标

4 个答案: