为什么Javascript没有正确创建表？

Question

我正在创建一个连接到Firebase实时数据库的程序，并在表格中显示该值。

她是我的代码：

remarksTable

Lookup<BaseEntity>是我从当前网址获取的ID，它包含正确的值，因此没有问题，路径也绝对正确。

这是表格代码：

Lookup<Agency>

现在，当我运行页面时，它连接到Firebase数据库并加载所需的值，创建表行和表数据，将文本附加到它，然后最终将行附加到id为{{1}的表但它没有正确创建行。请注意该表是使用Bootstrap创建的。

它的外观如下：

正如你所看到的，第一行显示正常，但是由javascript创建的接下来的两行看起来有点不同。

Answer 1

最可能的原因是你要将新行追加到table元素而不是其中的tbody元素，这与你未在问题中包含的样式表进行的交互很差。

请注意，所有表都有一个tbody元素。它的开始和结束标记是可选的，因此如果您没有明确提供一个（或更多），它将由HTML解析规则插入。

Answer 2

@Quentin是对的，或者你可以这样简单地添加新行：

var table = document.getElementById("remarksTable");
var row = table.insertRow();
var rowData1 = row.insertCell(0);
var rowData2 = row.insertCell(1);
var rowData2 = row.insertCell(2);
rowData1.innerHTML = remark;
rowData2.innerHTML = timestamp;
rowData3.innerHTML = "some text";  

这是一个有效的演示

function addCells() {
  var table = document.getElementById("remarksTable");
  var row = table.insertRow();
  var rowData1 = row.insertCell(0);
  var rowData2 = row.insertCell(1);
  var rowData3 = row.insertCell(2);
  rowData1.innerHTML = "your remark";
  rowData2.innerHTML = "your timestamp timestamp";
  rowData3.innerHTML = "some text";
}

<table id="remarksTable" border=1>
  <tr>
    <td>first cell</td>
    <td>2nd cell</td>
    <td>3rd cell</td>
  </tr>
</table>
<button onclick="addCells()">Add New</button>