Question

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

我使用innerHTML来设置表格行内容（包括单元格内容），我在Firefox＆amp;铬。但是，它在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;

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（我相信XHTML需要它，如果你有一个thead和tfoot）。

innerHTML不能在IE7上的表行元素上工作？

2 个答案: