Как наложить div (или любой элемент) на строку таблицы (tr)?

Question

Я хотел бы наложить div (или любой другой элемент, который будет работать) на строку таблицы (тег tr), которая имеет более одного столбца.

Я попробовал несколько методов, которые, кажется, не работают. Я разместил свой текущий код ниже.

Я получаю оверлей, но не прямо над строкой. Я попытался установить верхнюю часть наложения в $ div Bottom.css ('top'), но это всегда 'auto'.

Итак, я на правильном пути или есть лучший способ сделать это? Использование jQuery прекрасно, как вы можете видеть.

Если я на правильном пути, как мне правильно разместить div? Является ли offsetTop смещением в содержащем элементе, таблице, и мне нужно сделать некоторую математику? Любые другие ошибки, с которыми я столкнусь с этим?

$(document).ready(function() {
  $('#lnkDoIt').click(function() {
    var $divBottom = $('#rowBottom');
    var $divOverlay = $('#divOverlay');
    var bottomTop = $divBottom.attr('offsetTop');
    var bottomLeft = $divBottom.attr('offsetLeft');
    var bottomWidth = $divBottom.css('width');
    var bottomHeight = $divBottom.css('height');
    $divOverlay.css('top', bottomTop);
    $divOverlay.css('left', bottomLeft);
    $divOverlay.css('width', bottomWidth);
    $divOverlay.css('height', bottomHeight);

    $('#info').text('Top: ' + bottomTop + ' Left: ' + bottomLeft);
  });
});

#rowBottom { outline:red solid 2px }
#divBottom { margin:1em; font-size:xx-large; position:relative; }
#divOverlay { background-color:Silver; text-align:center;  position:absolute; z-index:10000; opacity:0.5; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
    <title>Overlay Tests</title>
  </head>
  <body>
    <p align="center"><a id="lnkDoIt" href="#">Do it!</a></p>
    <table width="100%" border="0" cellpadding="10" cellspacing="3" style="position:relative">
      <tr>
        <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></td>
      </tr>
      <tr id="rowBottom">
        <td><div id="divBottom"><p align="center">This is the bottom text</p></div></td>
      </tr>
      <tr>
        <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></td>
      </tr>
    </table>
    <div id="divOverlay" style=""><p>This is the overlay div.</p><p id="info"></p></div>
  </body>
</html>

javascript jquery html css overlay

54

slolife 17 Июн 2010 в 23:46

Answer 1

Вам нужно, чтобы оверлейный div имел абсолютную позицию. Также используйте метод position () jQuery для верхней и левой позиции строки - вот недостающие фрагменты:

var rowPos = $divBottom.position();
bottomTop = rowPos.top;
bottomLeft = rowPos.left;

//
$divOverlay.css({
    position: 'absolute',
    top: bottomTop,
    left: bottomLeft,
    width: bottomWidth,
    height: bottomHeight
});

35

Brian Scott 27 Июл 2011 в 09:48

Answer 2

Сделать:

div style="position:absolute"

td style="position:relative;display:block"

И вам не нужно jquery.

14

user1647224user1647224 2 Фев 2013 в 21:27

Answer 3

Получить высоту и ширину объекта просто. Самой сложной частью для меня были координаты сверху и слева для абсолютного позиционирования.

Это единственный скрипт, который когда-либо работал для меня надежно:

function posY(ctl)
{
    var pos = ctl.offsetHeight;
    while(ctl != null){
        pos += ctl.offsetTop;

        ctl = ctl.offsetParent; 
    }

    return pos;
}
function posX(ctl)
{
    var pos = 0;
    while(ctl != null){
        pos += ctl.offsetLeft;

        ctl = ctl.offsetParent; 
    }

    return pos;

}

0

mike 12 Фев 2014 в 18:41

Answer 4

Кроме того, убедитесь, что свойство переполнения внешних элементов (в данном случае таблицы) не установлено как скрытое. При скрытой настройке переполнения наложение не будет отображаться!

0

Fazi 9 Сен 2013 в 15:04

Answer 5

Это должно делать:

var bottomTop = $divBottom.offset().top;
var bottomLeft = $divBottom.offset().left;

0

Tushar Gupta - curioustushar 2 Май 2014 в 11:12

Как наложить div (или любой элемент) на строку таблицы (tr)?

5 ответов

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript