Задача такая. Есть массив элементов на странице, каждый из них - таблица. Я пытаюсь в цикле обратиться к каждому элементу и изменить его структуру (и содержание).
В конечном итоге, каждый элемент должен содержать конструкцию вида
<tbody>
<tr><td class="left_corner"></td>
<td bgcolor="#66ccff" class="title">Текст</td>
<td class="right_corner"></td>
</tr>
</tbody>
Простое обращение к innerHTML - работает только под Opera и FF, для IE пришлось писать такую штуку (тело цикла, где tabl[i] - конкретный элемент)
while (tabl[i].firstChild) {
tabl[i].removeChild(tabl[i].firstChild); //Очищаем содержание таблицы
}
//Вставляем новую стуктуру и содержание
var tr = tabl[i].insertRow(-1); // Добавляем строку
var td_lc = tr.insertCell(-1); //В нее вставляем левую ячейку
td_lc.className = 'left_corner'; //Присваеваем ей класс
var td_tl = tr.insertCell(-1);//Вставляем центральную ячейку
td_tl.className = 'title'; //Присваиваем класс
td_tl.setAttribute('bgcolor', '#66ccff'); //Прописываем bgcolor
td_tl.innerHTML = title_text; //Вставляем текст в тег
var td_rc = tr.insertCell(-1); //Вставляемс последнюю правую ячейку
td_lc.className = 'right_corner'; //Присваем ей класс
По факту должна получиться "плашка", с закругленными краями. Но на деле IE не сдается: получается что-то невразумительное:
http://www.drinkbeer.ru/equipment/vozvrat/ (там две плашки темно-синим цветом).
Помогите, понять не могу, что не так