Question

我试图生成一个简单的表格，用于＆＃39;循环，并且所有行和单元格生成都很好，但它们在Firefox中显示为空。如果你试图记录细胞＆＃39;在任何舞台上的innerText，内容都在那里，似乎它打破了一切。

HTML

<table id="table">
    <tr>
        <th>This</th>
        <th>Is</th>
        <th>Table</th>
        <th>Header</th>
        <th>in</th>
        <th>JsFiddle</th>
    </tr>
</table>

CSS

th, td {
    border: 1px solid black;
}

JS

for(var i=0; i<=5; i++){
  var tr = document.createElement('tr');
    for(var j=0; j<=5; j++){
        var td = document.createElement('td');
        td.innerText = "test";
        tr.appendChild(td);
    }
  document.getElementById('table').appendChild(tr);
}

在Chrome，IE，Opera，移动版Safari甚至Android浏览器中都能很好地运行。我错过了什么？

Answer 1

firefox问题是您使用.innerText，这不是标准属性。

改为使用.textContent。

为了支持IE8，我通常会为整个应用程序创建一个引用适当属性名称的变量。像这样：

var text = ("textContent" in document.documentElement) ? "textContent" : "innerText";

然后像这样使用它：

td[text] = "test";

虽然我不知道它会有什么不同，但您可以通过在向表中添加行之前附加到documentFragment来避免触及循环中的DOM。

// Generic container for holding the rows before they're appended
var frag = document.createDocumentFragment();

for(var i=0; i<=5; i++){
  var tr = document.createElement('tr');
    for(var j=0; j<=5; j++){
        var td = document.createElement('td');
        td.textContent = "test";
        frag.appendChild(td);
    }
}

// Appends all the rows at once
document.getElementById('table').appendChild(frag);

Answer 2

使用＆＃34; textContent＆＃34; property是您的代码示例的修复程序，但是您也可以考虑构建一个HTML内容字符串以注入到表中。

var str = '';
for(var i=0; i<=5; i++){
  str += '<tr>';
    for(var j=0; j<=5; j++){
      str += '<td>test</td>';
    }
  str += '</tr>';
}
document.getElementById('table').innerHTML = str;

这样做的主要优点是您首先构建整个内容，然后在一个事件中将内容插入到表中，从而导致只有一个绘制/重排事件。

根据表/内容的复杂程度，这可能比构建单个DOM元素和逐个插入要好得多。

请参阅此JSPerf测试以进行性能比较：http://jsperf.com/table-generation-options （TL;桌面浏览器上的DR字符串连接速度更快，在Internet Explorer中速度提高了10倍......但是在移动WebKit上，DOM方法看起来更快）

生成的表在firefox 33中是空的

2 个答案: