Question

我有一个包含一些视频详细信息的表格，我想将div元素附加到此表的tr中，绿色作为进度条，宽度从0％变为100 ％，与tr代表的视频的当前运行时相同。但在这个例子中，我只是将它设置为静态。我的代码如下：

＆＃13;

$("#highlight").append('<div id="playingBar"></div>');
$("#playingBar").css("left", $("#highlight").position().left);
$("#playingBar").css("height", $("#highlight").height());

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

除了div元素的宽度看起来总是大于tr元素的宽度之外，它运行良好。大家可以帮助我吗？谢谢！

如何将<div>标记附加到标记位置正确的标记中

0 个答案: