Создание динамически большой таблицы с использованием JavaScript

Question

Я пытаюсь создать динамически таблицу с использованием JavaScript.

Вот код, я использую (или здесь http://liveweave.com/mqG5iT):

function Process(){ 
     CreatTable(['First Name', 'Last Name', 'Email']); 

    } 
    function CreatTable(data) { 
    var checkbox; 
    var table; 
    var thead; 
    var tr; 
    var th; 
    var tbody; 

    tablearea = document.getElementById('ShowDataID'); 
    table = document.createElement('table'); 
    table.id = "ContactsTable"; 
    thead = document.createElement('thead'); 
    tr = document.createElement('tr'); 
    tbody = document.createElement('tbody'); 

    //create columns input checkbox column 
    checkbox = CreateHTMLElement("chkBoxAllEmails", "chkBoxAllEmails", "SelectAllEmails()", "checkbox", "false"); 
    th = document.createElement('th'); 
    th.appendChild(checkbox); 
    tr.appendChild(th); 
    thead.appendChild(tr); 

    //create columns FirstName,LastName,Emails 
    for (var i = 0; i < data.length; i++) { 
     var headerTxt = document.createTextNode(data[i]); 
     th = document.createElement('th'); 
     th.appendChild(headerTxt); 
     tr.appendChild(th); 
     thead.appendChild(tr); 
    } 
    table.appendChild(thead); 

    //create rows and addind to table 
    for (var i = 0; i < 2000; i++) { 
     tr = document.createElement('tr'); 
     checkbox = CreateHTMLElement("11", "11", "11", "checkbox", "11"); 
     tr.appendChild(document.createElement('td')); 
     tr.appendChild(document.createElement('td')); 
     tr.appendChild(document.createElement('td')); 
     tr.appendChild(document.createElement('td')); 

     tr.cells[0].appendChild(checkbox);    tr.cells[1].appendChild(document.createTextNode('John'+i.toString())); 
     tr.cells[2].appendChild(document.createTextNode('McDowell')); 
     tr.cells[3].appendChild(document.createTextNode('ddd@gmail.com')); 

     tbody.appendChild(tr); 
     table.appendChild(tbody); 
    } 
    document.getElementById("TablePagingArea").appendChild(table); 
    //return table; 
} 

function CreateHTMLElement(id, name, onclick, type, value) { 
    var HTMLElement = document.createElement('input'); 
    HTMLElement.id = id; 
    HTMLElement.name = name; 
    HTMLElement.onclick = onclick; 
    HTMLElement.type = type; 
    HTMLElement.value = value; 
    return HTMLElement; 
} 

С небольшим набором данных 1000-3000 строк она работает достаточно хорошо, но некоторые из набора данных содержит вверх из 5000 строк, которые заставляют Firefox терпеть крах и закрыться или стать невосприимчивыми.

Мой вопрос: есть ли лучший способ добиться того, что я пытаюсь сделать?

Answer 1

1. Наиболее эффективным способом создания множества элементов является создание строки и создание элемента из этой строки.

2. Наиболее эффективный способ создания строки элемента, чтобы присоединиться из массива

Таким образом, вы должны реорганизовать свой код

1. Создание массива элементов, как a[i] = "<tr><intput type='checkbox'></tr>";
2. Регистрация массив для получения одной строки var s = a.join();
3. Создание DOM элементы, такие как var div = document.createElement('div'); div.innerHTML = s;