html tr标签添加div,如何在表行（tr）上叠加div（或任何元素）？

我想在一个碰巧有多个列的表行(tr标签)上叠加一个div(或任何可以工作的元素)。

我尝试了一些似乎不起作用的方法。我在下面发布了我当前的代码。

我确实得到了一个叠加层，但不是直接在行上。我尝试将叠加层顶部设置为$ divBottom.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; }

Overlay Tests

Do it!

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is the bottom text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is the overlay div.

html tr标签添加div,如何在表行（tr）上叠加div（或任何元素）？相关推荐

给table表格的tr标签添加圆角效果
最近有个需求是给表格的每一栏数据加上一个椭圆的背景,原本以为只有添加 border-radius和背景色就能搞定,然而结果是边框和圆角对tr标签并不生效,轮廓虽然生效但是设置不了圆角效果,,经过百度发 ...
零基础前端笔记（2）html，表格，列表，标签，文本域，表单域
XHTML可扩展超文本标记语言(2) (1)创建表格 (2)表格属性表头单元格标签th 表格标题caption 小说排行榜 (3)合并单元格 (4)划分表格结构 (5)列表标签无序列表有序列表 ...
HTML 表格table tr td、表头标题、表结构、合并单元格
文章目录表格基本标签表格属性表格标题和表头单元格标签表格的结构标签(了解) 合并单元格表格基本标签 <table><tr><td>单元格内的文字</ ...
html中tr和td怎么快速输入,HTML的tr和td标签
网页制作用的较多的就是这些常用的标签,现在将tr和td分析如下: 1.HTML tr 标签 tr 标签 -- 代表HTML表格中的一行 * tr标签是成对出现的,以开始,结束 * 属性 o Comm ...
H5 table tr标签和td标签的区别
<tr> 标签定义 HTML 表格中的行. 一个 <tr> 元素包含一个或多个 <th> 或 <td> 元素. <td> 标签定义 HTML ...
JS从后台获取数据，前台动态添加tr标签中的td标签
功能描述: 要求从后台查询该省份的所有城市,然后动态的再前台固定的tr标签中添加相应的td标签来展示城市基本信息: 文章目录 #一.前台jsp及js源码 jsp:在固定的tr标签中添加一个id,通过j ...
表格标签 table标签 tr标签单元格间距单元格居中加粗表单居中
table标签 table标签是表格标签用这个可以创建一个表格在标签中可以设置表格的相关属性 tr标签和td标签一个<tr></tr>标签代表一行一个<td> ...
tr标签单独添加border
直接定义table tr{ border-bottom: 1px solid #e5e5e5; }是不生效的,有border但是不显示: 必须在tr外层的table标签添加border-collaps ...
PHP实现单击“添加”按钮增加一行表单项，并将所有内容插入到数据库中
PHP实现单击"添加"按钮增加一行表单项,并将所有内容插入到数据库中效果图: html+jquery: <html> <head> <meta ht ...

html tr标签添加div,如何在表行（tr）上叠加div（或任何元素）？

html tr标签添加div,如何在表行（tr）上叠加div（或任何元素）？相关推荐

最新文章

热门文章