为什么Javascript不能正确创建表？

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

她是我的密码：

var leadsRef = database.ref('leads/'+leadID);
var table = document.getElementById('remarksTable');

leadsRef.on('child_added', function(snapshot) {
  var remark = snapshot.val().remark;
  var timestamp = snapshot.val().timestamp;

  var row = document.createElement('tr');
  var rowData1 = document.createElement('td');
  var rowData2 = document.createElement('td');
  var rowData3 = document.createElement('td');
  var rowDataText1 = document.createTextNode(remark);
  var rowDataText2 = document.createTextNode(timestamp);
  var rowDataText3 = document.createTextNode("Some text");
  rowData1.appendChild(rowDataText1);
  rowData2.appendChild(rowDataText2);
  rowData3.appendChild(rowDataText3);
  row.appendChild(rowData1);
  row.appendChild(rowData2);
  row.appendChild(rowData3);
  table.appendChild(row);
});

leadID

是我从当前url获取的ID，它包含正确的值，因此没有问题，路径也绝对正确

以下是表格代码：

<table class="table table-bordered" id="remarksTable">
    <tr>
        <th><strong>Created On</strong></th>
        <th><strong>Timestamp 2</strong></th>
        <th><strong>Remarks</strong></th>
    </tr>
    <tr>
        <td>12312313231</td>
        <td>12312312312</td>
        <td>just a remark.</td>
    </tr>
</table>

创建于
时间戳2
备注
12312313231
12312312312
只是一句话。

现在，当我运行该页面时，它连接到Firebase数据库并加载所需的值，创建表行和表数据，将文本附加到该页面，然后最后将行附加到id为

remarksTable

的表中，但它没有正确创建行。请注意，该表是使用引导创建的

这就是它的样子：

---

如您所见，第一行显示良好，但接下来由javascript创建的两行看起来有点不同。

最可能的原因是您将新行附加到table元素，而不是其中的tbody元素，这与问题中未包含的样式表交互不良

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

---

@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";  

这里是一个工作演示

函数addCells（）{
var table=document.getElementById（“remarkTable”）；
var row=table.insertRow（）；
var rowData1=row.insertCell（0）；
var rowData2=row.insertCell（1）；
var rowData3=row.insertCell（2）；
rowData1.innerHTML=“您的评论”；
rowData2.innerHTML=“您的时间戳”；
rowData3.innerHTML=“一些文本”；
}

第一单元
第二单元
第三单元
添加新的

要做到这一点，最好使用像mustach这样的模板引擎。它将比手动创建html元素和节点更干净。顺便说一句，昆汀的解决方案应该能解决你的问题