0

我有一个有 2 列的表。当用户单击第 2 列的任何单元格时，它应该在“那个单元格”上覆盖一个 div，该 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/

4

3 回答 3

0

这将是我的方法。请注意该类最初是如何具有我们需要的位置和左偏移量的，而且我们只是根据需要将其附加到元素上。

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

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

});

小提琴

笔记 -

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

于 2013-07-16T19:42:36.377 回答
0 
        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
        });
        ....
        ....

更新小提琴

于 2013-07-16T19:44:22.393 回答
0

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

还添加：left : bottomLeft

于 2013-07-16T19:45:53.480 回答