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

【问题标题】：Why Javascript is not creating tables properly?为什么 Javascript 不能正确创建表？
【发布时间】：2016-12-01 04:31:57
【问题描述】：

我正在创建一个连接到 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 创建的接下来的 2 行看起来有点不同。

【问题讨论】：

要做这样的事情，最好使用像 Mustache 这样的模板引擎。这将比手动创建 html 元素和节点更干净。 BTW @Quentin 的解决方案应该可以解决您的问题

标签： javascript twitter-bootstrap firebase html-table firebase-realtime-database

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：