我有一个包含一些视频详细信息的表格，我想将一个 div 元素附加到该表格的 tr 中，并将绿色作为进度条，宽度为从 0% 变为 100%，与 tr 代表的视频的当前运行时间相同。但在这个例子中，我只是将其设置为静态。
我的代码如下:
$("#highlight").append('<div id="playingBar"></div>');
$("#playingBar").css("left", $("#highlight").position().left);
$("#playingBar").css("height", $("#highlight").height());table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
#playingBar {
position: absolute;
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 100%;
height: 100%;
background-color: rgba(0,255,0,0.4);
text-align: center; /* To center it horizontally (if you want) */
line-height: 30px; /* To center it vertically */
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr id="highlight">
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</body>它运行良好，除了 div 元素的宽度看起来总是大于 tr 元素的宽度。
大家能帮帮我吗？谢谢!
最佳答案
如果你想突出显示就用这个，你不需要jquery
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
#playingBar {
position: absolute;
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 100%;
height: 100%;
background-color: rgba(0,255,0,0.4);
text-align: center; /* To center it horizontally (if you want) */
line-height: 30px; /* To center it vertically */
color: white;
}
tr#highlight {
background-color: rgba(0, 255, 0, 0.4);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr id="highlight">
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</body>好的，因为 #highlight 设置为绝对位置，您不能将 tr 设置为相对位置(这看起来很奇怪)。 #highlight 将获得主体的 100% 宽度。 所以我所做的只是将#highlight 的宽度带入 var = width 并将其交给#playingBar
$(window).on("load resize",function(){
var width = $("#highlight").outerWidth();
$("#highlight").append('<div id="playingBar"></div>');
$("#playingBar").css("left", $("#highlight").position().left);
$("#playingBar").css("left", $("#highlight").position().left);
$("#playingBar").css("width", width);
$("#playingBar").css("height", $("#highlight").height());
});table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
#playingBar {
position: absolute;
left:0;
margin: 0 0 0 0;
padding: 0 0 0 0;
height: 100%;
background-color: rgba(0,255,0,0.4);
text-align: center; /* To center it horizontally (if you want) */
line-height: 30px; /* To center it vertically */
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr id="highlight">
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</body>关于javascript - 如何将 <div> 标签附加到 <tr> 标签中，且位置与 <tr> 标签完全相同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45633028/