javascript - 如何在 HTML 表格中使用 javascript 对象

Question

我有 2 个 Javascript 对象，我想将它们的值用作 HTML 表的一部分。

对象为 JSON 格式。这意味着每个元素在我的 Javascript 中看起来如下所示:

total[0] = {name: 'Total', y: '230'}
totalRenew[0] = {name: 'Renew Total', y: '30'}

我需要像这样在表格中呈现它们的 y 值:

<table style="position:absolute; z-index: 1000; margin-left: 25px; margin-top:400px;  width:20%">
 <th>Output (MW)</th>
 <tr></tr>
  <tr>
    <td><strong>Total</strong></td>
    <td>{$total[0].y}</td>
  </tr>
  <tr>
    <td><strong>Renewables</strong></td>
    <td>{totalRenew[0].y}</td>
  </tr>
</table> 

但这只是打印实际的文本。这些值是动态的，每 5 分钟更改一次。

如何在 HTML 表格中引用 JavaScript 元素？

Answer 1

如果您没有使用像 Angular 这样的框架，请使用 JavaScript 来插入您的值。试试这个:

<table style="position:absolute; z-index: 1000; margin-left: 25px; margin-top:400px;  width:20%">
 <th>Output (MW)</th>
 <tr></tr>
  <tr>
    <td><strong>Total</strong></td>
    <td><span id="total"></span></td>
  </tr>
  <tr>
    <td><strong>Renewables</strong></td>
    <td><span id="totalRenew"></span></td>
  </tr>
</table> 

Javascript:

total[0] = {name: 'Total', y: '230'};
totalRenew[0] = {name: 'Renew Total', y: '30'};

document.getElementById('total').innerHTML = total[0].y;
document.getElementById('totalRenew').innerHTML = totalRenew[0].y;