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只能分配给一个单元格的innerHTML（td或th），而不能分配给表格的任何其他部分。

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修改单元格内容。

Answer 2

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

jQuery示例：

// 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需要它）。