Come sovrapporre un div (o qualsiasi elemento) su una riga della tabella (tr)?

Mi piacerebbe sovrapporre un div (o qualsiasi elemento che funzionerà) su una riga della tabella (tag tr) che ha più di una colonna.Come sovrapporre un div (o qualsiasi elemento) su una riga della tabella (tr)?

Ho provato alcuni metodi, che non sembrano funzionare. Ho pubblicato il mio codice attuale qui sotto.

Ottengo un overlay, ma non direttamente sopra la riga. Ho provato a impostare l'overlay top su $ divBottom.css ('top'), ma è sempre 'auto'.

Quindi, sono sulla buona strada, o c'è un modo migliore di farlo? Utilizzare jQuery va bene come puoi vedere.

Se sono sulla buona strada, come faccio a posizionare correttamente il div? L'offsetTop è un offset nell'elemento contenitore, nella tabella e ho bisogno di fare qualche calcolo matematico? Qualche altra cosa con cui mi imbatterò?

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

fonte

2010-06-17 slolife

Hai bisogno di fare il div overlay hanno una posizione assoluta. Anche utilizzare la posizione) metodo di jQuery (per le posizioni superiore e sinistra della fila - qui ci sono i pezzi mancanti:

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

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

fonte

2010-06-17 20:09:03 jhorback

suo eccessivamente già raccolto "position: absolute" dal suo foglio di stile. Comunque hai ragione sull'uso di "pos()". – Pointy

Sembra fare il trucco ... con una modifica: var rowPos = $ divBottom.pos(); deve essere var rowPos = $ divBottom.offset(); .offset() è in alto/a sinistra nel documento. – slolife

jquery non ha una funzione chiamata 'pos'. La sintassi corretta sarebbe $ divBottom.position(); –

fa:

div style="position:absolute" 

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

e non hai bisogno di jQuery.

fonte

2013-02-02 21:27:23

Come posso selezionare una riga di tabella specifica su centinaia? – koppor

+1 Questa è una soluzione molto più semplice e ha funzionato per me. Ho usato una classe: 'td {position: relativo; blocco di visualizzazione;} .overlay {position: absolute; white-space: nowrap; z-index: 1000;} 'e poi applicata la classe alla prima cella:' lungo blocco di testo B ' – Roberto

PS - Per IE <8 la posizione relativa deve anche essere applicato al TR. – Roberto

Inoltre, assicurarsi che la proprietà di overflow degli elementi esterni (in questo caso la tabella) non sia impostata su nascosta. Con l'impostazione nascosta su overflow, non verrà visualizzato alcun overlay!

fonte

2013-09-09 15:04:53 Fazi

Ottenere l'altezza e la larghezza di un oggetto semplice. La parte difficile per me è stata la coordinata Top e Left per il posizionamento assoluto.

Questo è l'unico script che abbia mai funzionato in modo affidabile per me:

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; 

}

fonte

2014-02-12 18:41:58 mike

Questo dovrebbe fare:

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

fonte

2014-05-02 10:55:26

Come sovrapporre un div (o qualsiasi elemento) su una riga della tabella (tr)?

risposta

Problemi correlati