Firefox 33中生成的表为空[重复]

Question

我正在尝试使用简单的“for”循环生成一个表，所有行和单元格都可以正常生成，但它们在 Firefox 中显示为空。如果您尝试在任何阶段记录单元格的内部文本，内容就在那里，似乎它破坏了一切。

这是代码示例： http://jsfiddle.net/7s8e4w3p/

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

使用“textContent”属性可以解决您的代码示例，但是您也可以考虑构建一串 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 方法似乎更快）

Answer 2

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);