javascript - innerHTML 不适用于 IE7 上的表行元素？

Question

请检查此示例:http://jsfiddle.net/lulu2792/a9LZd/

我使用 innerHTML 设置表格行内容(包括单元格内容)，我在 Firefox 和 Chrome 上运行良好。但是，它在 IE7 上有一个错误(在 IE9 兼容模式下也是如此)。表格 HTML 结果是:

<TABLE id=table1>
 <TBODY>
  <TR>
   <TD>
    Test
   </TD>
  </TR>
  <TR>
   ABC
   </TD>
  </TR>
 </TBODY>
</TABLE>

请关注第二行，它有一个错误。我不明白为什么 innerHTML 在 IE7 上会导致这个错误。如何解决这个问题？

我还有一个问题:如果我不在这样的表格元素中使用 tbody 标签:

var html = "<table id='table1'><tr><td>Test</td></tr></table>";

浏览器仍然呈现这个标签。

请帮我回答上面两个问题。

Answer 1

您不能使用 innerHTML 属性在 IE 中编写表格的各个部分，您必须使用 DOM 方法。 innerHTML 可用于编写整个表格或单元格的内容。

MSDN 上有一个例子:Building Tables Dynamically .

MDN 上也有例子:Using the DOM Table Interface

在您在别处发布的代码中(最好在此处发布):

// create table
var html = "<table id='table1'><tbody><tr><td>Test</td></tr></tbody></table>";
document.getElementById('div1').innerHTML = html;

这很好用，因为它创建了一个完整的表格。

// append a row into table
var tr = document.createElement('tr');
var td = document.createElement('td');
td.innerHTML = 'ABC';
tr.appendChild(td);
var s = tr.innerHTML;

以上在所有浏览器中都可以正常工作。

tr.innerHTML = s;

糟糕，只能分配给单元格(td 或 th)的 innerHTML，不能分配给表格的任何其他部分。

tr.innerHTML = '<td>' + 'ABC' + '</td>';

还是一样。

var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0];

您可以使用 tBodies属性来简化:

var tbody = document.getElementById('table1').tBodies[0];
tbody.appendChild(tr);

如果您没有弄乱 tr 的 innerHTML，那会很好用。

请注意，您还可以:

var tbody = document.getElementById('table1').tBodies[0];
var row = tbody.insertRow(-1);
var cell = row.insertCell(-1);
cell.innerHTML = 'whatever';

你就完成了。您还可以克隆整行，然后使用 innerHTML 修改单元格内容。