solution de contournement innerhtml pour les éléments IE td?

Question

je la fonction suivante:

<script type="text/javascript"> 
function changeText(elem){ 
    var oldHTML = document.getElementById(elem).innerHTML; 
    var newHTML = "<span style='color:red'>" + oldHTML + "</span>"; 
    document.getElementById(elem).innerHTML = newHTML; 
} 

</script> 

Et le code HTML suivant:

<table> 
<tr> 
<td id = "foo">bar</td> 
</tr> 
</table> 

Cela jette une "erreur d'exécution inconnue" (juste dans IE) qui googling a depuis m'a appris que les éléments de table sont en lecture seule dans IE avec innerHTML.

J'ai essayé de trouver des solutions de contournement, mais elles ne ciblent pas mon problème spécifique, qui est juste que je veux rendre le mot "barre" rouge. Je ne veux pas changer le mot «barre» pour autre chose. Purement un changement de couleur.

Existe-t-il un moyen de le faire sans une fonction DOM complexe et lente et sans avoir à modifier l'un des autres balises HTML sur la page? C'est une table avec un formulaire, et si l'internaute soumet le formulaire avec une erreur, les champs "erronés" devraient devenir rouges. Il doit être capable de s'exécuter plusieurs fois car il est possible qu'un internaute gâche plus d'un champ.

Merci pour tout conseil.

Answer 1

Pourquoi ne pas simplement changer la cellule d'avoir color:'red':

var td = document.getElementById(elem); 
td.style.color = 'red'; 

Answer 2

deux manières de s'y prendre. Voici quelques exemples rapides pour vous aider à démarrer, ou jusqu'à ce que quelqu'un d'autre vous propose une méthode plus propre/meilleure.

Je préfère les suivantes: définir une classe d'erreur dans css:

.errorHighlight { color:red;} 

Puis le javascript:

function changeText(elem){ 
    document.getElementById(elem).className="errorHighlight"; 
} 
function changeTextBack(elem){ 
    document.getElementById(elem).className=""; 
} 

Cela suppose que vous n'avez pas des classes déjà le cas. Si vous le faites, vous devrez peut-être lire le nom et ajouter la classe d'erreur avec un espace.

Encore une fois, il y a de nombreuses façons d'aborder cela et vous voulez choisir celle qui convient le mieux à votre application.