当尝试通过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 中，浏览器将在表格和行元素之间添加一个 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);

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