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

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

WBOYoriginal: 2016-05-16 16:35:131625parcourir

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>

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)

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>

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

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：alertez le code de valeur aléatoire dans les compétences array_javascriptArticle suivant：alertez le code de valeur aléatoire dans les compétences array_javascript

Articles Liés

Voir plus