Динамическое создание таблицы с помощью DOM

Question

Динамическое создание таблицы с помощью DOM

Кто-нибудь может сказать мне, что не так с этим кодом? Я хочу создать таблицу с 2 столбцами и 3 строками, и в ячейках я хочу Text1 и Text2 в каждой строке. Этот код создает таблицу с 2 столбцами и 3 строками, но это только текст в ячейках в третьей строке (остальные пустые).

var tablearea = document.getElementById('tablearea');

var table = document.createElement('table');

var tr = [];

var td1 = document.createElement('td');
var td2 = document.createElement('td');

var text1 = document.createTextNode('Text1');
var text2 = document.createTextNode('Text2');

for (var i = 1; i < 4; i++){
    tr[i] = document.createElement('tr');   
    for (var j = 1; j < 4; j++){
        td1.appendChild(text1);
        td2.appendChild(text2);
        tr[i].appendChild(td1);
        tr[i].appendChild(td2);
    }           
    table.appendChild(tr[i]);

}

tablearea.appendChild(table);

27

javascript dom

задан Brian Tompsett - 汤莱恩 21 December 2016 в 10:01

1 ответ

Другие вопросы по тегам:

javascript dom

Похожие вопросы:

score 2 · Answer 1

Можно создать динамические строки таблицы как указано ниже:

var tbl = document.createElement('table');
tbl.style.width = '100%';

for (var i = 0; i < files.length; i++) {

        tr = document.createElement('tr');

        var td1 = document.createElement('td');
        var td2 = document.createElement('td');
        var td3 = document.createElement('td');

        ::::: // As many <td> you want

        td1.appendChild(document.createTextNode());
        td2.appendChild(document.createTextNode());
        td3.appendChild(document.createTextNode();

        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);

        tbl.appendChild(tr);
}