Javascript innerHTML 不适用于 IE7 上的表格行元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12613617/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
innerHTML not working on table row element on IE7?
提问by Leo Vo
Please check this example: http://jsfiddle.net/lulu2792/a9LZd/
请检查这个例子：http: //jsfiddle.net/lulu2792/a9LZd/
I use innerHTML to set a table row content (including cell contents), I run well on Firefox & Chrome. However, It has a bug on IE7 (also on IE9 Compatibility Mode). The table HTML result is:
我使用innerHTML来设置表格行内容（包括单元格内容），我在Firefox和Chrome上运行良好。但是，它在 IE7 上有一个错误（也在 IE9 兼容模式上）。表格 HTML 结果是：
<TABLE id=table1>
<TBODY>
<TR>
<TD>
Test
</TD>
</TR>
<TR>
ABC
</TD>
</TR>
</TBODY>
</TABLE>
Please focus on the 2nd row, it has a bug. I don't understand why innerHTML cause this bug on IE7. How to correct this problem?
请关注第 2 行，它有一个错误。我不明白为什么innerHTML 会在IE7 上导致这个错误。如何纠正这个问题？
And I also have a question: if I don't use tbody tag inside a table element like this:
而且我还有一个问题：如果我不在这样的表格元素中使用 tbody 标签：
var html = "<table id='table1'><tr><td>Test</td></tr></table>";
browser still renders this tag.
浏览器仍然呈现这个标签。
Please help me to answer two above questions.
请帮我回答以上两个问题。
回答by RobG
You can't use the innerHTML property to write parts of a table in IE, you must use DOM methods. innerHTML can be used to write an entire table, or the contents of a cell.
您不能使用 innerHTML 属性在 IE 中编写表格的一部分，您必须使用 DOM 方法。innerHTML 可用于编写整个表格或单元格的内容。
There is an example on MSDN: Building Tables Dynamically.
MSDN 上有一个例子：Building Tables Dynamically。
There is also an example on MDN: Using the DOM Table Interface
MDN上还有一个例子：Using the DOM Table Interface
In the code you posted elsewhere (much better to post it here):
在您在其他地方发布的代码中（最好在此处发布）：
// create table
var html = "<table id='table1'><tbody><tr><td>Test</td></tr></tbody></table>";
document.getElementById('div1').innerHTML = html;
That works fine because it creates an entire table.
这很好用，因为它创建了一个完整的表。
// 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;
The above works fine in all browsers.
以上适用于所有浏览器。
tr.innerHTML = s;
Ooops, can only assign to the innerHTML of a cell (td or th), not any other part of a table.
哎呀，只能分配给单元格（td 或 th）的innerHTML，而不是表格的任何其他部分。
tr.innerHTML = '<td>' + 'ABC' + '</td>';
Same again.
又一样。
var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0];
You can use the tBodiesproperty to simplify that:
您可以使用tBodies属性来简化：
var tbody = document.getElementById('table1').tBodies[0];
tbody.appendChild(tr);
That would work fine if you hadn't messed with the innerHTML of the tr.
如果您没有弄乱 tr 的innerHTML，那会很好用。
Note that you could also do:
请注意，您还可以执行以下操作：
var tbody = document.getElementById('table1').tBodies[0];
var row = tbody.insertRow(-1);
var cell = row.insertCell(-1);
cell.innerHTML = 'whatever';
And you're done. You can also clone an entire row then modify the cell contents with innerHTML.
你已经完成了。您还可以克隆整行，然后使用 innerHTML 修改单元格内容。
回答by Joe Coder
Internet Explorer has notorious issues with appending HTML to a table. The best solution is to use a 3rd party library which normalizes behavior across browsers (such as jQuery, but there are others).
Internet Explorer 在将 HTML 附加到表格时存在臭名昭著的问题。最好的解决方案是使用第 3 方库来规范跨浏览器的行为（例如jQuery，但还有其他）。
jQuery example:
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>');
});
Hey also, that second row is missing the <td>start tag.
嘿，第二行缺少<td>开始标签。
Your second question: a tbody is not required (I believe XHTML requires it if you have a thead and a tfoot).
你的第二个问题：tbody 不是必需的（我相信 XHTML 需要它，如果你有一个 thead 和一个 tfoot）。
