我有一个包含一些视频细节的表格,我想在此表中添加一个div元素tr,绿色作为进度条,宽度从0%变为100%,与当前tr代表的视频运行时相同.但在这个例子中,我只是将它设置为静态.我的代码如下:
$("#highlight").append('<div id="playingBar"></div>');
$("#playingBar").css("left", $("#highlight").position().left);
$("#playingBar").css("height", $("#highlight").height());Run Code Online (Sandbox Code Playgroud)
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: …Run Code Online (Sandbox Code Playgroud)