Динамическое создание таблицы в Javascript

У меня есть рабочая таблица, в которой при нажатии кнопки таблица динамически создается путем перебора массива и отображения этих данных в каждой ячейке.

Однако проблема возникает, когда я пытаюсь добавить заголовок таблицы для своей таблицы, и я не уверен, что делаю неправильно.

Вот мой текущий рабочий код: (хотя, похоже, он не работает в JSFiddle?!)

И вот код, который я пытаюсь добавить: (что должно быть неправильно)

var thd=document.createElement("thead");
tab.appendChild(thd);

var tr= document.createElement("tr"); 
tbdy.appendChild(tr); 

var th= document.createElement("th");
th.appendChild(document.createTextNode("Name");
tr.appendChild(th);

Любая помощь будет принята с благодарностью,


javascript html-table appendchild createelement
person fmer    schedule 31.05.2014    source источник
comment
Вам нужно настроить jsfiddle так, чтобы код не переносился в событие загрузки. jsfiddle.net/ahEkH/1   -  person JJJ    schedule 01.06.2014
comment
Вы забыли закрыть ввод, поэтому jsFiddle не работает: jsfiddle.net/ahEkH/3   -  person Waclock    schedule 01.06.2014
comment
И заголовок работает так же хорошо, пока вы исправляете отсутствующий ) в предпоследней строке. jsfiddle.net/ahEkH/2. Пришло время узнать, как работает консоль ошибок JavaScript.   -  person JJJ    schedule 01.06.2014
comment
Вместо tbdy.appendChild(tr); вы наверное хотели написать thd.appendChild(tr);, нет?   -  person c-smile    schedule 01.06.2014

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать цикл, чтобы избежать дублирования кода. Например:

var columns = ["Name", "Age", "Degree"];

var thd = document.createElement("thead");
tab.appendChild(thd);

var tr = document.createElement("tr"); 
thd.appendChild(tr);

for (var i = 0; i < columns.length; i++) {
    var th = document.createElement("th");
    th.appendChild(document.createTextNode(columns[i]));
    tr.appendChild(th);    
}

Демонстрация: http://jsfiddle.net/ahEkH/6/

person dfsq    schedule 31.05.2014