Question

我有一个包含2列的表格。当用户点击第2列的任何单元格时，它应该覆盖“该单元格”上的div，该单元格应该左上方与已单击的单元格对齐，并具有绝对定位。

我们怎么做呢。这是我到目前为止所做的（不是工作代码）

var $divOverlay = $('#divOverlay');
        var bottomWidth = $(this).css('width');
        var bottomHeight = $(this).css('height');
        var rowPos = $(this).position();
        bottomTop = rowPos.top;
        bottomLeft = rowPos.left;
        $divOverlay.css({
            position: 'absolute',
            top: bottomTop,
            right: '0px',
            width: '80%',
            height: '500px'
        });

小提琴：http://jsfiddle.net/v4dXn/14/

Answer 1

这将是我的方法。请注意，类最初是如何获得我们需要的位置和左偏移，我们只需要根据需要将它附加到元素。

$('td').on('click', function(){
    var $this = $(this),
    $divOverlay = $('#divOverlay');

    $divOverlay.css({
        height:$this.height(),
        width:$this.outerWidth()
    }).appendTo($this).show();

});

Fiddle

注意 -

如果您在单元格上使用填充而不是硬宽度值，则只需要outerWidth()，以防您使用某种类型的响应式设计。

Answer 2

        var $divOverlay = $('#divOverlay');
        var bottomWidth = $('tr').css('width');   //Get the width of the tr
        var bottomHeight = $('tr').css('height'); //Get the height of the tr 
        var rowPos = $(this).position();
        bottomTop = rowPos.top;
        bottomLeft = rowPos.left;
        $divOverlay.css({
            position: 'absolute',
            top: bottomTop,            
            width: bottomWidth,  //assign here
            height: bottomHeight //assign here
        });
        ....
        ....

Update fiddle

Answer 3

我相信在这种情况下，您应该使用.offset而不是.position，因为这些元素不共享同一个父级。 http://api.jquery.com/offset/

同时添加：left : bottomLeft

将元素放在另一个上面

3 个答案: