Создать полную динамическую структуру таблицы с одним циклом с Javascript

Question

Мне нужно создать табличку, которая может иметь несколько строк. Я создаю таблицу во время выполнения с javascript. В настоящее время сделал это с двумя петли

exlTb = document.getElementById('exlTb'); 
tbl = document.createElement('table'); 
tbdy = document.createElement('tbody'); 

for(var i=0; i <= row; i++){ 
    var tr=document.createElement('tr'); 
    for(var j = 0; j <= colomn; j++){ 
     var td = document.createElement('td'); 
     tr.appendChild(td); 
     } 
    tbdy.appendChild(tr); 
    } 
tbl.appendChild(tbdy); 
exlTb.appendChild(tbl); 

Я пытаюсь оптимизировать мое решение

Answer 1

Если ваша цель состоит в том, чтобы создать таблицу более быстро, все эти поездки и из DOM слоя являются чем-то вы может избавиться. Браузеры действительно очень быстро при разборе HTML. При динамическом построении таблиц вам обычно лучше создавать разметку, а затем анализировать браузер и создавать его все сразу, потому что вы все время не пересекаете эту границу JavaScript/DOM.

Вот один из способов:

exlTb = document.getElementById('exlTb'); 
var markup = ['<table><tbody>']; 

for(var i=0; i <= row; i++){ 
    markup.push('<tr>'); 
    for(var j = 0; j <= colomn; j++){ 
     markup.push('<td></td>'); 
     } 
    markup.push('</tr>'); 
    } 
markup.push('</tbody></table>'); 
exlTb.innerHTML = markup.join(""); // <== Note: Assumes exlTb is otherwise empty 

Создание разметки вверх в массиве, а затем комбинируя его раз в конце быстрее во многих случаях (но не все), чем конкатенация строк. Я ожидаю, если вы посмотрите вокруг, есть тест http://jsperf.com, который уже существует ...