我有一个包含一些视频细节的表，我想将一个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被设置为position absolute，而你不能将tr设置为positive relative(这看起来很奇怪)。#高亮显示将获得主体的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><style>
#highlight { background-color: #feb5b5; }
</style>