html - 从 html 表值创建进度条

Question

我需要这方面的帮助。 我正在尝试根据另一个 TD 元素的值创建一个简单的进度条。 下面是我的代码。 我想要 <hr> 的宽度属性值等于第一个 <TD> 上设置的值元素。

<table>
  <tr>
    <TD id="item">70%</td>
    <td width=200 style="border: 2px solid silver;padding:none">
      <hr style="color:#c00;background-color:#c00;height:15px; border:none;
                 margin:0;" align="left" width=50%;        />
    </td>
  </tr>
</table>

Answer 1

你可以这样做

widthValue = document.getElementById("item").innerText;
document.getElementsByTagName("hr")[0].style.width = widthValue;

这将获取 <td> 的文本内容, 并将其设置为 <hr> 的宽度元素。你最好给出 <hr>一个 id，因此您可以通过 id 设置它，而不是依赖于通过标签名称找到它。