nsingh nsingh - 1 month ago 14
HTML Question

Create a table dynamically using for loop in .html()

I am new to JQuery so don't really know how to proceed ahead . I need to create an html structure (table ) dynamically using $(this).html (..create table...).
Below is my pseudo code.

$(this).html('<table>for(var a=0;a<NoteCount;a++){<tr><td><div id = "NotePadTextArea">NoteArrayVal[a]</div></td></tr>}</table>'
);


NoteArrayVal is an array which already has values in it.
How to go ahead with this kind of design?
Please help.

Answer

You must create td and text nodes within loop. This code creates only 2 td, so only 2 are visible. Example:

var table = document.createElement('table');
for (var i = 1; i < 4; i++) {
    var tr = document.createElement('tr');   
    var td1 = document.createElement('td');
    var td2 = document.createElement('td');
    var text1 = document.createTextNode('Text1');
    var text2 = document.createTextNode('Text2');
    td1.appendChild(text1);
    td2.appendChild(text2);
    tr.appendChild(td1);
    tr.appendChild(td2);
    table.appendChild(tr);
}
document.body.appendChild(table);