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

Question

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 1

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