suchen

Heim >Web-Frontend >js-Tutorial >Lösung für das Problem, dass innerHTML von tbody in IE6-IE9_Javascript-Kenntnissen kein Wert zugewiesen werden kann

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

WBOY
WBOYOriginal
2016-05-16 16:35:131624Durchsuche

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>

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)

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>

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) 
}

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) 
}
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Geben Sie den Zufallswertcode in den array_javascript-Fähigkeiten anNächster Artikel：Geben Sie den Zufallswertcode in den array_javascript-Fähigkeiten an

In Verbindung stehende Artikel

Mehr sehen