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
– Darshan Dave, Commented Dec 4, 2015 at 9:55

Krupesh Kotecha · Accepted Answer · 2015-12-04 10:47:43Z

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

edited Dec 4, 2015 at 10:47

Krupesh Kotecha

2,4123 gold badges23 silver badges40 bronze badges

answered Dec 4, 2015 at 9:57

coder771

3685 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

coder771 Over a year ago

@nsingh can you mark it as an aswer and upvote. thanks

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related