2011-05-07 122 views
0

我很想尝试黑客添加一个功能到插件。获取屏幕坐标的css

我的情况是,div覆盖在具有许多单元格的表格的顶部。这个div横跨它下面的表格的许多单元格。但它并没有嵌入表格中 - 如前所述;但实际上在屏幕上设置了绝对的x,y坐标。

如果我点击浮动DIV我可以得到jsEvent鼠标坐标x,y ..

我怎样才能再使用这些坐标来获得像在该坐标例如细胞类的所有元素的CSS更多的数据,id等直接点击x,y?或者直接在下面或上面的所有单元格。

我想使用jQuery。有什么建议么。

+0

唯一的跨浏览器的方式是循环遍历每个td元素,使用鼠标坐标检查每个偏移量。为什么不能使用'$('td')。click(function(){...});'? – grc 2011-05-07 11:54:19

+0

,因为我没有点击实际的表格。我点击不在表格内部的表格顶部的div。所以td点击将永远不会开火,除非我点击td而不是浮动div ..见? – ppumkin 2011-05-07 11:57:03

+0

但通过所有td的想法是不错的想法,但非常无益..任何其他建议? – ppumkin 2011-05-07 11:59:54

回答

2

这应该工作(其中mousex和像老鼠是COORDS):

$('td').each(function(index) { 
    var offset = $(this).offset(); 
    if ((offset.left + $(this).outerWidth()) > mousex && offset.left < mousex && (offset.top + $(this).outerHeight()) > mousey && offset.top < mousey) { 
     // $(this).css... 
    } 
    }); 
+0

是啊,宝贝!多数民众赞成在! – ppumkin 2011-05-07 12:29:59

1

像这样:

$("#div").click(function(event){ 
    var x = event.pageX, y = event.pageY; 
    var $clickedTd = $("#table td").filter(function(){ 
    var tdx = $(this).offset().left, tdy = $(this).offset().top; 
    var tdw = $(this).width(), tdh = $(this).height(); 
    return (x >= tdx && x <= tdx+w && y >= tdy && y <= tdy + tdh); 
    }); 
    //Here you have a reference to the clicked cell in $clickedTd. use it as you want; 
}); 

我们正在做的是找到TD,这只是在地方我们点击(获取div点击坐标)。

干杯

+0

我看着你的,但grx似乎更清洁 - 它的工作复制和粘贴。谢谢你的回答!不知道效率,但.. – ppumkin 2011-05-07 12:30:43