在IE中无法在tbody上设置innerHTML

Question

我有这样一张桌子:

<table>
<thead>
    <tr>
        <th colspan="1">a</th>
        <th colspan="3">b</th>
    </tr>
</thead>
<tbody id="replaceMe">
    <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
    </tr>
</tbody>
</table>

一个方法在ajax请求后返回以下内容:

<tr>
    <td>data 1 new</td>
    <td>data 2 new</td>
    <td>data 3 new</td>
    <td>data 4 new</td>
</tr>

我想改变innerHTML

document.getElementById('replaceMe').innerHTML = data.responseText;

但是,似乎IE无法设置innerHTML <tbody>.任何人都可以帮我解决这个问题的简单方法吗？

Answer 1

确实如此,tbody元素上的innerHTML在IE中是readOnly

该属性是读/写的除以下所有对象,它是只读的:COL,COLGROUP,FRAMESET,HEAD,HTML,STYLE,TABLE,TBODY,TFOOT,THEAD,TITLE,TR.

来源:http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx

你可以做这样的事情来解决它:

function setTBodyInnerHTML(tbody, html) {
  var temp = tbody.ownerDocument.createElement('div');
  temp.innerHTML = '<table>' + html + '</table>';

  tbody.parentNode.replaceChild(temp.firstChild.firstChild, tbody);
}

基本上它会创建一个临时节点,您可以注入一个完整的节点table.然后,它取代了tbody与tbody从注入table.如果证明它很慢,你可以通过缓存temp而不是每次都创建它来加快速度.

Answer 2

创建一个临时节点来存储表,然后将它们复制到tbody

  var tempNode = document.createElement('div');
  tempNode.innerHTML = "<table>" + responseText+ "</table>";

  var tempTable = tempNode.firstChild;
  var tbody = // get a reference to the tbody
  for (var i=0, tr; tr = tempTable.rows[i]; i++) {
    tbody.appendChild(tr);
  }