CODEWITHSUNDEEP
javascriptloops
Michael
Michael

Reputation: 13616

Creating dynamically large table using JavaScript

I'm trying to create dynamically a table using JavaScript.

Here is the code I'm using (or here 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('[email protected]'));

        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;
}

With a small set of data 1000-3000 rows it works relatively well but, some of the data set contains upwards of 5000 rows which causes Firefox to crash and close or become unresponsive.

My question is: is there a better way to accomplish what I am trying to do?

Upvotes: 0

Views: 1883

Answers (1)

Max Brodin
Max Brodin

Reputation: 3938

  1. Most efficient way to create a bunch of elements is to create a string and create element from this string.

  2. Most efficient way to create a string of element is to join from array

So you should refactor your code to

  1. Create an array of elements like a[i] = "<tr><intput type='checkbox'></tr>";
  2. Join an array to get one string var s = a.join();
  3. Create DOM elements like var div = document.createElement('div'); div.innerHTML = s;

Upvotes: 1

Related Questions