Question

为了调试玩具惯性飞船sim，我一直在按键控制的SVG窗口下方列出当前活动的按键。我决定将数据动态地放入表中以改善整体外观，但是我却无法以某种方式将数据放入实际的td标签中。而是，数据一直显示在表格单元格之外。

以下是相关代码：

table, th, tr, td
{
  border-collapse: collapse;
  width: 400px;
}

.index
{
  border: 1px solid black;
}
.value
{
  border: 1px solid black;
}

<tr id="iostats">
  <td class="index">Keys:</td>
  <td class="value"></td>
</tr>

let iostats = document.getElementById( "iostats" );

所有这些只是准备代码。以下代码位于计时器回调中：

  /* tmp will contain an array after this. */
var tmp = io.getState();

iostats.innerHTML =
  "<td class=\"index\">Keys:</td>" +
  "<td class=\"value\">" + 10 + "</td>";

for( var key in tmp )
{
  iostats.innerHTML += "<td class=\"value\">";
  iostats.innerHTML += " " + key + ":" + tmp[ key ];
  iostats.innerHTML += " </td>";
}

对此我的期望是，将在数据单元内显示键值，冒号和与该键值相对应的数据值。相反，如前所述，它们会显示在单元格之外，从而缩小所有单元格。

我是否以某种方式错误期望Javascript函数中的语句按照出现的顺序有效地执行？所有代码似乎都以错误的顺序运行。

Answer 1

innerHTML不能处于未关闭标签的状态，因此此代码

  iostats.innerHTML += "<td class=\"value\">";
  iostats.innerHTML += " " + key + ":" + tmp[ key ];
  iostats.innerHTML += " </td>";

首先添加"<td class='value'>"，然后自动将其关闭。然后添加文本，然后添加结束标记。要进行测试，请打开一个新选项卡，打开Web检查器，然后在控制台中键入document.body.innerHtml += "div"。您会在Web检查器中注意到已添加了一个div元素（带有结束标记）。

要修复此问题，只需一次完成：

iostats.innerHTML += "<td class='value'> " + key + ":" + tmp[ key ] + "</td>";

或

let addMe = "<td class='value'>"
 + " " + key + ":" + tmp[ key ]
 + " </td>"
iostats.innerHTML += addMe;

或者如果您想花哨的话

iostats.innerHTML += `<td class='value'>${key}:${tmp[key]}</td>`;

无法调试HTML动态表

1 个答案: