Вставка данных в ячейку HTML-таблицы средствами JS

Рейтинг: 0Ответов: 1Опубликовано: 27.01.2015

Есть сгенерированная посредством JS таблица:

<div id = "cal"> 
  <table> 
    <tr> 
      <td data-cell = "27-1-2015"> "27, " "Tuesday" </td> 
    </tr> 
  </table> 
</div>

Как при помощи native JS можно вставить DIV в каждую уже сгенерированную ячейку (<td>...</td>) этой таблицы?

javascript
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Метод "в лоб", перебираем все ячейки и в каждую пихаем строку с нужным div'ом:

var t = document.getElementById("id_of_table");
var trs = t.getElementsByTagName("tr");
vat tds = null;

for (var i=0; i<trs.length; i++)
{
    tds = trs[i].getElementsByTagName("td");
    for (var n=0; n<trs.length;n++)
    {
        tds[n].innerHTML = "<div>Hi!</div>"
    }
}

Либо используя appendChild (к сожалению, проверить это вариант сейчас не могу):

var d=document.createElement('div');
d.style.width='200px';
d.style.height='100px';
d.style.background='gray';
tds[n].appendChild(d);