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

Question

我正在创建一个连接到 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>

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

它是这样的:

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

Answer 1

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

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