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.

means you need create multiple table or single dynamic table with for attribute? — Darshan Dave, Dec 04 '15 at 09:55

score 1 · Accepted Answer · edited Dec 04 '15 at 10:47

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

@nsingh can you mark it as an aswer and upvote. thanks – coder771 Dec 07 '15 at 08:36 — coder771, Dec 07 '15 at 08:36

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

1 Answers1

Linked