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

When trying to dynamically add table elements using JavaScript via innerHTML doesn't render in IE7, IE8 and IE9

本文关键字：IE8 IE7 innerHTML IE9 JavaScript 动态 元素 添加      更新时间：2023-09-26

我一直在网上搜索这个，我被难住了。下面的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是传递给该函数的变量(在本例中，5的int值)。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;

任何想法?

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

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

在上面的HTML中，浏览器会在table和row元素之间添加一个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);

克隆一行并修改单元格内容可能比创建新的行和单元格更有效。

相关文章：