Lösung für das Problem, dass innerHTML von tbody in IE6-IE9_Javascript-Kenntnissen kein Wert zugewiesen werden kann-js-Tutorial-php.cn

Lösung für das Problem, dass innerHTML von tbody in IE6-IE9_Javascript-Kenntnissen kein Wert zugewiesen werden kann

WBOY

Freigeben： 2016-05-16 16:35:13

Original

1622 Leute haben es durchsucht

Dem innerHTML von tbody kann in IE6-IE9 kein Wert zugewiesen werden. Der zu reproduzierende Code lautet wie folgt

Js-Code

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
<title>IE6-IE9中tbody的innerHTML不能复制bug</title> 
</head> 
<body style="height:3000px"> 
<table> 
<tbody> 
<tr><td>aaa</td></tr> 
</tbody> 
</table> 
<p> 
<button id="btn1">GET</button><button id="btn2">SET</button> 
</p> 
<script> 
var tbody = document.getElementsByTagName('tbody')[0] 
function setTbody() { 
tbody.innerHTML = '<tr><td>bbb</td></tr>' 
} 
function getTbody() { 
alert(tbody.innerHTML) 
} 
btn1.onclick = function() { 
getTbody() 
} 
btn2.onclick = function() { 
setTbody() 
} 
</script> 
</body> 
</html>

Nach dem Login kopieren

Zwei Schaltflächen, die erste erhält das innerHTML von tbody und die zweite legt das innerHTML von tbody fest.

Alle Browser zeigen beim Abrufen die tr-Zeichenfolge an, aber IE6-9 unterstützt sie beim Festlegen nicht und es wird ein Fehler gemeldet, wie in der Abbildung gezeigt

Sie können mithilfe der Funktionsbeurteilung feststellen, ob der Browser die innerHTML-Einstellung von tbody unterstützt

var isupportTbodyInnerHTML = function () {
var table = document.createElement('table')
var tbody = document.createElement('tbody')
table.appendChild(tbody)
var boo = true
try{
tbody.innerHTML = '<tr></tr>'
} catch(e) {
boo = false
}
return boo
}()
alert(isupportTbodyInnerHTML)

Nach dem Login kopieren

Klicken Sie, um zu sehen, ob der Browser, in dem Sie diesen Blog gerade durchsuchen, dies unterstützt

Klicken Sie auf mich

<script type="text/javascript">// <![CDATA[ var isupportTbodyInnerHTML = function () { var table = document.createElement('table') var tbody = document.createElement('tbody') var tr = document.createElement('tr') var td = document.createElement('td') var txt = document.createTextNode('a') td.appendChild(txt) tr.appendChild(td) tbody.appendChild(tr) table.appendChild(tbody) var boo = true try{ tbody.innerHTML = '<tr><td>b</td></tr>' } catch(e) { boo = false } return boo }(); tbodyInnerHTML.onclick = function() { if (isupportTbodyInnerHTML) { alert('你的浏览器支持tbody的innerHTML赋值') } else { alert('你的浏览器是IE6-9内核，不支持tbody的innerHTML赋值') } } // ]]></script>

Nach dem Login kopieren

Wenn Sie das innerHTML von tbody in IE6-IE9 festlegen möchten, können Sie die folgende alternative Methode verwenden

Js-Code

function setTBodyInnerHTML(tbody, html) { 
var div = document.createElement('div') 
div.innerHTML = '<table>' + html + '</table>' 
while(tbody.firstChild) { 
tbody.removeChild(tbody.firstChild) 
} 
tbody.appendChild(div.firstChild.firstChild) 
}

Nach dem Login kopieren

Verwenden Sie ein Div, um eine Tabelle zu enthalten, löschen Sie dann alle Elemente im Tbody und fügen Sie schließlich das erste Element des ersten Elements des Div zum Tbody hinzu, d. h. div>table>tr.

Natürlich gibt es eine schlankere Version, die direkt die Methode „replaceChild“ verwendet, um

zu ersetzen

Js-Code

function setTBodyInnerHTML(tbody, html) { 
var div = document.createElement('div') 
div.innerHTML = '<table>' + html + '</table>' 
tbody.parentNode.replaceChild(div.firstChild.firstChild, tbody) 
}

Nach dem Login kopieren