[英]Can't set innerHTML on tbody in IE
我有一张这样的桌子:
<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无法在<tbody>
上设置innerHTML。 谁能为我提供一个解决此问题的简单方法?
没错,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
。 然后用注入table
的tbody
替换tbody
。 如果证明它很慢,则可以通过缓存temp
而不是每次都创建它来使其更快。
创建一个临时节点来存储表,然后将它们复制到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);
}
可以通过为.innerHTML创建填充程序/填充来解决此问题。 这可以使您(亲爱的读者)开始学习:
if (/(msie|trident)/i.test(navigator.userAgent)) {
var innerhtml_get = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").get
var innerhtml_set = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").set
Object.defineProperty(HTMLElement.prototype, "innerHTML", {
get: function () {return innerhtml_get.call (this)},
set: function(new_html) {
var childNodes = this.childNodes
for (var curlen = childNodes.length, i = curlen; i > 0; i--) {
this.removeChild (childNodes[0])
}
innerhtml_set.call (this, new_html)
}
})
}
var mydiv = document.createElement ('div')
mydiv.innerHTML = "test"
document.body.appendChild (mydiv)
document.body.innerHTML = ""
console.log (mydiv.innerHTML)
以上两个答案似乎都不清楚。 另外,永远不会删除创建的div,因此反复调用这些函数会占用内存。 尝试这个:
// this function must come before calling it to properly set “temp”
function MSIEsetTBodyInnerHTML(tbody, html) { //fix MS Internet Exploder’s lameness
var temp = MSIEsetTBodyInnerHTML.temp;
temp.innerHTML = '<table><tbody>' + html + '</tbody></table>';
tbody.parentNode.replaceChild(temp.firstChild.firstChild, tbody); }
MSIEsetTBodyInnerHTML.temp = document.createElement('div');
if (navigator && navigator.userAgent.match( /MSIE/i ))
MSIEsetTBodyInnerHTML(tbody, html);
else //by specs, you can not use “innerHTML” until after the page is fully loaded
tbody.innerHTML=html;
即使使用此代码,MSIE似乎也无法正确调整应用程序中表格单元格的大小,但是我正在用生成的可变内容填充空的tbody标签,而thead单元格的colspan值设置为固定值:生成的肢体内可能存在的最大单元数。 表格正文为50个单元格宽时,仅显示两列。 也许如果表最初是填充的,并且单元格被相同的内部结构替换,则此方法将起作用。 Google的Chrome浏览器在重建表格方面做得非常出色,而Opera的桌面浏览器可以将更多列的大小调整得很好,但是如果删除列,则剩余的列宽度将保持原来的宽度。 但是,在Opera中,通过隐藏表格(display = none)然后重新显示表格(display = table),可以适当地调整生成的表格tbody单元的大小。 我已经放弃了Firefox。 这是2012年的MSIE-6,这是一场噩梦,必须为此添加额外的标记才能使HTML-CSS布局正常工作,因为它甚至不符合MSIE现在的标准。 因此,我尚未在Firefox中测试过tbody.innerHTML的工作原理。
<table id="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>
<button type="button" onclick="replaceTbody()">replaceTbody</button>
<script>
function $(id){
return document.getElementById(id);
}
function replaceTbody(){
var table = $('table');
table.removeChild($('replaceMe'));
var tbody = document.createElement("tbody");
tbody.setAttribute("id","replaceMe");
table.appendChild(tbody);
var tr = document.createElement('tr');
for(var i=1;i<5;i++){
var td = document.createElement('td');
td.innerHTML = 'newData' + i;
tr.appendChild(td);
}
tbody.appendChild(tr);
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.