Solution au problème selon lequel innerHTML de tbody ne peut pas se voir attribuer de valeur dans les compétences IE6-IE9

Solution au problème selon lequel innerHTML de tbody ne peut pas se voir attribuer de valeur dans les compétences IE6-IE9_javascript

WBOY

Libérer： 2016-05-16 16:35:13

original

1613 Les gens l'ont consulté

Le innerHTML de tbody ne peut pas se voir attribuer de valeur dans IE6-IE9. Le code à reproduire est le suivant

Code Js

<!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>

Copier après la connexion

Deux boutons, le premier obtient le innerHTML du corps et le second définit le innerHTML du corps.

Tous les navigateurs affichent la chaîne tr lors de son obtention, mais IE6-9 ne la prend pas en charge lors de sa configuration, et une erreur est signalée, comme le montre la figure

Vous pouvez utiliser le jugement des fonctionnalités pour voir si le navigateur prend en charge le paramètre innerHTML de tbody

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)

Copier après la connexion

Cliquez pour voir si le navigateur avec lequel vous parcourez ce blog en ce moment le prend en charge

Cliquez sur moi

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

Copier après la connexion

Si vous souhaitez définir le innerHTML de tbody dans IE6-IE9, vous pouvez utiliser la méthode alternative suivante

Code Js

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

Copier après la connexion

Utilisez un div pour contenir un tableau, puis supprimez tous les éléments du tbody, et enfin ajoutez le premier élément du premier élément du div au tbody, c'est-à-dire div>table>tr.

Bien sûr, il existe une version plus simplifiée, qui utilise directement la méthode replaceChild pour remplacer

Code Js

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

Copier après la connexion