innerHTML无法在IE7上的表格行元素上工作？

请检查下面的例子：http://jsfiddle.net/lulu2792/a9LZd/innerHTML无法在IE7上的表格行元素上工作？

我使用innerHTML设置表行内容（包括单元格内容），我在Firefox & Chrome的运行情况良好。但是，它在IE7上有一个错误（也在IE9兼容模式下）。表格HTML的结果是：

<TABLE id=table1> 
<TBODY> 
    <TR> 
    <TD> 
    Test 
    </TD> 
    </TR> 
    <TR> 
    ABC 
    </TD> 
    </TR> 
</TBODY> 
</TABLE>

请关注第2行，它有一个错误。我不明白为什么innerHTML会导致IE7上的这个错误。如何纠正这个问题？

而且我也有一个问题：如果我不使用TBODY标签的表格元素中是这样的：

var html = "<table id='table1'><tr><td>Test</td></tr></table>";

浏览器仍然呈现此标签。

请帮我解答2上面的问题。谢谢。

来源

2012-09-27 Leo Vo

你的代码没有意义。 'var s = tr.innerHTML; tr.innerHTML = s'。将内部html设置为某些内容，将tr设置为自身，然后使用固定字符串摧毁所有内容和东西？ –

我给出了这个上下文，以便你很容易看到这个问题。首先，tr.innerHTML是有效的HTML - >我将它分配给变量's'。在我没有任何改变的情况下重新分配给tr.innerHTML之后。显然，tr.innerHTML有变化。我不知道为什么。 –

您不能使用innerHTML属性在IE中编写表的某些部分，您必须使用DOM方法。 innerHTML可用于写入整个表格或单元格的内容。

在MSDN上有一个示例：Building Tables Dynamically。

还有在MDN一个例子：因为它创造了整个表

// create table 
var html = "<table id='table1'><tbody><tr><td>Test</td></tr></tbody></table>"; 
document.getElementById('div1').innerHTML = html;

这工作正常：Using the DOM Table Interface

在你发布在其他地方的代码（好得多它张贴在这里）。

// 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;

只能分配给单元格的内部HTML（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修改单元格内容。

来源

2012-09-27 03:34:34 RobG

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需要它，如果你有一个tad和tad）。

来源

2012-09-27 03:31:34

请检查此：http://jsfiddle.net/lulu2792/qYFTy/您尝试在任何浏览器上运行它。 tbody标签总是在表格元素内部创建的。 –

这很正常。请参阅[这个答案]（http://stackoverflow.com/a/1681427/159570）了解更多信息。我只是在谈论源HTML。 –

请注意，表格中必须包含“tbody”元素，但标记是可选的。 – RobG

innerHTML无法在IE7上的表格行元素上工作？

回答

相关问题