Javascript 如何在表格行 (tr) 上覆盖 div（或任何元素）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3065080/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to overlay a div (or any element) over a table row (tr)?
提问by slolife
I'd like to overlay a div (or any element that'll work) over a table row (tr tag) that happens to have more than one column.
我想在恰好有不止一列的表格行（tr 标记）上覆盖一个 div（或任何可以工作的元素）。
I have tried a few methods, which don't seem to work. I've posted my current code below.
我尝试了几种方法，但似乎都不起作用。我已经在下面发布了我当前的代码。
I do get an overlay, but not directly over just the row. I tried setting the overlay top to $divBottom.css('top'), but that is always 'auto'.
我确实得到了一个覆盖，但不是直接覆盖在行上。我尝试将覆盖顶部设置为 $divBottom.css('top')，但这始终是 'auto'。
So, am I on the right track, or is there a better way of doing it? Utilizing jQuery is fine as you can see.
那么，我是在正确的轨道上，还是有更好的方法呢？如您所见，使用 jQuery 很好。
If I am on the right track, how do I get the div placed correctly? Is the offsetTop an offset in the containing element, the table, and I need to do some math? Any other gotchas I'll run into with that?
如果我在正确的轨道上，如何正确放置 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>采纳答案by jhorback
You need to make the overlay div have an absolute position. Also use the position() jQuery method for top and left positions of the row - here are the missing pieces:
您需要使叠加 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
});
回答by jhorback
Make:
制作：
div style="position:absolute"
td style="position:relative;display:block"
and you don't need jquery.
而且你不需要jquery。
回答by Fazi
Also, make sure the the outer elements (in this case the table) overflow property is not set to hidden. With the hidden setting on overflow, no overlay will be displayed!
另外，请确保外部元素（在本例中为表格）的溢出属性未设置为隐藏。使用溢出的隐藏设置，将不会显示叠加层！
回答by mike
Getting the height and width of an object straightforward. The hard part for me was the Top and Left coordinates for absolute positioning.
直接获取对象的高度和宽度。对我来说困难的部分是绝对定位的顶部和左侧坐标。
This is the only script that has ever worked reliably for 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;
}
回答by Leoj Etagram
This should do:
这应该做：
var bottomTop = $divBottom.offset().top;
var bottomLeft = $divBottom.offset().left;
