Jak nakładać element div (lub dowolny element) na wiersz tabeli (tr)?

Chciałbym nakładki div (lub dowolnego elementu, który będzie działać) na wiersz tabeli (tr), które ma więcej niż jedną kolumnę.Jak nakładać element div (lub dowolny element) na wiersz tabeli (tr)?

Próbowałem kilka metod, które wydają się nie działać. Poniżej zamieściłem mój obecny kod.

Dostaję nakładkę, ale nie bezpośrednio nad rzędem. Próbowałem ustawić wierzch nakładki na $ divBottom.css ("top"), ale to zawsze jest "auto".

Czy jestem na dobrej drodze, czy jest lepszy sposób na zrobienie tego? Korzystanie z jQuery jest w porządku, jak widać.

Jeśli jestem na dobrej drodze, w jaki sposób mogę poprawnie umieścić element div? Czy offsetTop stanowi przesunięcie w elemencie zawierającym, tabeli i muszę wykonać trochę matematyki? Jakieś inne problemy, z którymi bym się z tym spotkał?

$(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>

Źródło

2010-06-17 slolife

Musisz zrobić div nakładki mieć absolutną pozycję. Również użyć pozycję() metoda jQuery dla najlepszych i pozostawionych pozycjach rzędu - oto brakujące kawałki:

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

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

Źródło

2010-06-17 20:09:03 jhorback

Jego nadmiernie już podniósł „position: absolute” ze swojego arkusza stylów. Jednak masz rację co do używania "pos()". – Pointy

Wygląda na to, że można to zrobić ... z jedną zmianą: var rowPos = $ divBottom.pos(); powinien być var rowPos = $ divBottom.offset(); .offset() to góra/lewo w dokumencie. – slolife

jquery nie ma funkcji o nazwie "pos". Poprawna składnia to $ divBottom.position(); –

Producent:

div style="position:absolute" 

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

i nie trzeba jQuery.

Źródło

2013-02-02 21:27:23

Jak wybrać jeden określony wiersz tabeli spośród setek? – koppor

+1 To znacznie prostsze rozwiązanie, które zadziałało u mnie. Użyłem klasy: 'td {position: relative; Blok wyświetlacza;} .overlay {position: absolute; white-space: nowrap; Z-Index: 1000;} ', a następnie stosuje się klasę, do pierwszej komórki: ' długi blok tekstu B' – Roberto

PS - IE <8 pozycja względna musi również być stosowane do TR. – Roberto

Upewnij się również, że właściwość przepełnienia elementów zewnętrznych (w tym przypadku tabeli) nie jest ukryta. Przy ukrytym ustawieniu na przepełnieniu, nie będzie wyświetlana żadna nakładka!

Źródło

2013-09-09 15:04:53 Fazi

Uzyskiwanie wysokości i szerokości obiektu prostego. Najtrudniejsze dla mnie było współrzędne górnego i lewego dla bezwzględnego pozycjonowania.

Jest to jedyny scenariusz, jaki kiedykolwiek pracował niezawodnie dla mnie:

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; 

}

Źródło

2014-02-12 18:41:58 mike

ten powinien zrobić:

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

Źródło

2014-05-02 10:55:26

Jak nakładać element div (lub dowolny element) na wiersz tabeli (tr)?

Odpowiedz

Powiązane problemy