innerhtml обходной путь для элементов IE td?

Question

У меня есть следующая функция:

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

И следующий HTML:

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

Это выдает «неизвестную ошибку времени выполнения» (только в IE), которую с тех пор научил поискМне кажется, что элементы таблицы доступны только для чтения в IE с innerHTML.

Я пытался найти обходные пути, но они не нацелены на мою конкретную проблему, а именно то, что я хочу сделать слово "bar" красным.Я не хочу менять слово «бар» на что-то другое.Чисто изменение цвета.

Есть ли способ сделать это без сложной и медленной функции DOM и без необходимости изменения какой-либо другой разметки HTML на странице?Это таблица с формой, и если пользователь отправляет форму с ошибкой, поля с ошибками должны стать красными.Он должен выполняться несколько раз, потому что серфер может испортить более одного поля.

Спасибо за любой совет.

Answer 1

Пара способов сделать это. Вот некоторые из них, которые помогут вам - или пока кто-нибудь другой не придет с более чистым / лучшим методом.

Я предпочитаю следующее: определить класс ошибок в css:

.errorHighlight { color:red;}

Тогда для javascript:

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

Предполагается, что у вас уже нет классов. В противном случае вам может понадобиться прочитать имя и добавить класс ошибки с пробелом.

Опять же, есть много способов подойти к этому, и вы хотите выбрать наиболее подходящий для вашего приложения.

Answer 2

Почему бы просто не изменить ячейку на color:'red':

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