生成的表在 Firefox 33 中为空

Generated table is empty in firefox 33

本文关键字：Firefox      更新时间：2023-09-26

我正在尝试使用简单的"for"循环生成一个表，并且所有行和单元格都生成得很好，但它们在 Firefox 中显示为空。如果您尝试在任何阶段记录单元格的 innerText，内容就在那里，似乎它破坏了一切。

下面是代码示例：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，Mobile Safari甚至Android浏览器中运行良好。我错过了什么？

火狐的问题是你使用的是.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);

使用"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方法似乎更快）

相关文章：