innerHTML无法在IE7上处理表格行元素? [英] innerHTML not working on table row element on IE7?

问题描述

请检查以下示例: http://jsfiddle.net/lulu2792/a9LZd/

我使用innerHTML设置表格行内容(包括单元格内容)，在Firefox&铬合金.但是，它在IE7(以及IE9兼容模式)上有一个错误.该表的HTML结果是:

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:

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

请专注于第二行，它有一个错误.我不明白为什么innerHTML导致IE7上的此错误.如何解决这个问题?

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?

我还有一个问题:如果我不在这样的表格元素内使用tbody标签:

And I also have a question: if I don't use tbody tag inside a table element like this:

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

浏览器仍会呈现此标记.

browser still renders this tag.

请帮助我回答上述两个问题.

Please help me to answer two above questions.

推荐答案

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

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.

在MSDN上有一个示例:动态构建表.

There is an example on MSDN: Building Tables Dynamically.

在MDN上也有一个示例:使用DOM表接口

There is also an example on 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;

糟糕，只能分配给单元格(td或th)的innerHTML，而不能分配给表的任何其他部分.

Ooops, can only assign to the innerHTML of a cell (td or th), not any other part of a table.

tr.innerHTML = '<td>' + 'ABC' + '</td>';

再次相同.

var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0];

您可以使用 tBodies 属性简化该操作:

You can use the tBodies property to simplify that:

var tbody = document.getElementById('table1').tBodies[0];
tbody.appendChild(tr);

如果您不熟悉tr的innerHTML，那会很好.

That would work fine if you hadn't messed with the innerHTML of the tr.

请注意，您也可以这样做:

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

您已经完成.您还可以克隆整行，然后使用innerHTML修改单元格内容.

And you're done. You can also clone an entire row then modify the cell contents with innerHTML.

这篇关于innerHTML无法在IE7上处理表格行元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！