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 上有一个示例：动态生成表。

在 MDN 上还有一个示例：使用 DOM 表接口

在你发布到其他地方的代码中（最好在这里发布）：

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

Ooops，只能分配给单元格（td或th）的内部HTML，而不能分配给表格的任何其他部分。

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的内部HTML，那会很好用。

请注意，您还可以执行以下操作：

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

大功告成。您还可以克隆整行，然后使用 innerHTML 修改单元格内容。

Answer 2

Internet Explorer在将HTML附加到表中时存在臭名昭著的问题。 最好的解决方案是使用第三方库来规范跨浏览器的行为（例如jQuery，但还有其他浏览器）。

j查询示例：

// invokes a function when document is ready
// dollar symbol is "jQuery" alias inside function
jQuery(function($) {
    // select the table body and append a new row
    $('#table1 tbody').append('<tr><td>ABC</td></tr>');
});

嘿，第二行缺少<td>开始标记。

你的第二个问题：不需要 tbody （我相信如果你有 thead 和 tfoot，XHTML 需要它）。