尝试通过 innerHTML 使用 JavaScript 动态添加表格元素时，在 IE7、IE8 和 IE9 中不呈现

Question

我一直在互联网上搜索这个，我很难过。以下 Javascript 可在 Chrome、Firefox 和 Safari 中使用，但无论出于何种原因，它在 IE 7+ 中都无法使用。我所说的“不工作”是指在尝试添加表格元素时，浏览器/屏幕上没有显示任何内容。我使用了 IE 的内置开发者工具，在控制台的调试器上什么也没有显示。

简而言之，我要做的就是创建表格行，在第一列中包含复选框，在第二列中包含纯文本。此外，这整个方法是在 AJAX 事件之后调用的。

代码如下：

tdObjs[0].innerHTML = '<input type="checkbox" name="page" value="' + pageID + '" 
onClick="fooFunction(\'' + pageID + '\', this,
 \'_images/foo/' + pageID + '.png\', \'' + pageID 
+ '\')" checked="yes">';

其中pageID 是传递给此函数的变量（在此确切示例中，它的int 值为5）。 tdObjs 定义为：

var tdObjs = trObj.getElementsByTagName('TD');

并且trObj 被传递到这个函数中。 trObj 确实显示在 IE 开发工具的 local 窗口中，因为它是在另一个函数中定义的，如下所示：

var tableObj = $('##FooTable')[0];
var trObj = document.createElement('tr');
trObj.appendChild(document.createElement('td'));
for (var i=0;i<2;i++)
        trObj.appendChild(document.createElement('td'));
tableObj.appendChild(trObj);
return trObj;

有什么想法吗？提前谢谢你。

Answer 1

在IE中向表格添加行时，必须将它们添加到tbody中，例如

<table id="foo">
  <tr>
    <td>cell 0
    <td>cell 1
</table>

在上面的 HTML 中，浏览器会在 table 和 row 元素之间添加一个 tbody 元素。 tbody 是强制性的，但标签是可选的。因此，要添加行，您必须执行以下操作：

var table = document.getElementById('foo');
var tbody = table.tBodies[0];
var row = document.createElement('tr');
var cell = document.createElement('td');

// Give cell some content and add it
cell.appendChild(document.createTextNode('cell 0'));
row.appendChild(cell);

// Make another cell and add it
cell = cell.cloneNode(false);
cell.appendChild(document.createTextNode('cell 1'));
row.appendChild(cell);

tbody.appendChild(row);

克隆一行并修改单元格内容可能比创建新行和单元格更有效。这取决于你。