Cách che phủ một div (hoặc bất kỳ phần tử nào) trên một hàng của bảng (tr)?

Tôi muốn che phủ một div (hoặc bất kỳ thành phần nào sẽ hoạt động) qua một hàng trong bảng (thẻ tr) xảy ra có nhiều hơn một cột.Cách che phủ một div (hoặc bất kỳ phần tử nào) trên một hàng của bảng (tr)?

Tôi đã thử một vài phương pháp có vẻ không hoạt động. Tôi đã đăng mã hiện tại của mình bên dưới.

Tôi nhận được lớp phủ, nhưng không trực tiếp trên hàng. Tôi đã cố gắng thiết lập các lớp phủ hàng đầu để $ divBottom.css ('top'), nhưng đó luôn luôn là 'tự động'.

Vì vậy, tôi đang đi đúng hướng hay có cách nào tốt hơn để làm điều đó? Sử dụng jQuery là tốt như bạn có thể nhìn thấy.

Nếu tôi đi đúng hướng, làm cách nào để đặt div được đặt đúng? Là bù đắp một bù đắp trong phần tử có chứa, bảng, và tôi cần phải làm một số toán học? Bất kỳ gotchas khác tôi sẽ chạy vào với điều đó?

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

Nguồn

2010-06-17 slolife

Bạn cần phải thực hiện các div lớp phủ có một vị trí tuyệt đối. Cũng sử dụng các vị trí() phương pháp jQuery cho vị trí hàng đầu và bên trái của hàng - đây là các mảnh còn thiếu:

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

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

Nguồn

2010-06-17 20:09:03 jhorback

ông quá đã nhặt "position: absolute" từ stylesheet của mình. Tuy nhiên bạn đang đúng về việc sử dụng "pos()". – Pointy

Điều đó dường như thực hiện thủ thuật ... với một thay đổi: var rowPos = $ divBottom.pos(); phải là var rowPos = $ divBottom.offset(); .offset() là trên cùng/bên trái trong tài liệu. – slolife

jquery không có chức năng có tên 'pos'. Cú pháp chính xác sẽ là $ divBottom.position(); –

Make:

div style="position:absolute" 

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

và bạn không cần phải jquery.

Nguồn

2013-02-02 21:27:23

Làm cách nào để chọn một hàng bảng cụ thể trong số hàng trăm? – koppor

+1 Đây là một giải pháp đơn giản hơn nhiều và nó làm việc cho tôi. Tôi đã sử dụng một lớp: 'td {position: relative; display: block;}.overlay {position: absolute; trắng-không gian: nowrap; z-index: 1000;} 'và sau đó áp dụng lớp cho ô đầu tiên:' khối văn bản dài B ' – Roberto

PS - Đối với IE <8 vị trí tương đối cũng phải được áp dụng cho TR. – Roberto

Ngoài ra, hãy đảm bảo rằng phần tử bên ngoài (trong trường hợp này bảng) thuộc tính tràn không được đặt thành ẩn. Với cài đặt ẩn trên tràn, không có lớp phủ nào được hiển thị!

Nguồn

2013-09-09 15:04:53 Fazi

Lấy chiều cao và chiều rộng của vật thể đơn giản. Phần khó cho tôi là các tọa độ trên cùng và bên trái để định vị tuyệt đối.

Đây là kịch bản duy nhất mà đã từng làm việc đáng tin cậy đối với tôi:

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; 

}

Nguồn

2014-02-12 18:41:58 mike

này nên làm:

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

Nguồn

2014-05-02 10:55:26

Cách che phủ một div (hoặc bất kỳ phần tử nào) trên một hàng của bảng (tr)?

Trả lời

Các vấn đề liên quan