How to create a dynamic table in jQuery?

Question

I want to create a dynamic table in jQuery. But my code creates a table for each of my element.

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var str = dataItem.Description;
var spl = str.split(','), part;
var spl2 = "";
for (var i = 0; i < spl.length; i++) {
    part = spl[i].split(':');
    content = "<table>" + "<tr><td>" + part[0] + "</td>" + "<td>" + part[1] + "</td></tr>";
    spl2 += content;
}
content += "</table>"
var desc = "<div id='openModal' class='modalDialog'>" + "<span>" +
    spl2
    + "</span><br/>" +
    +  "</div>";

Which part of my code is wrong?

its because you are creating your table tag inside the for loop. put the `<table>' tag before the loop like you are closing the table tag — Anoop LL
– Anoop LL, Commented Apr 25, 2016 at 7:04
@AnoopLL I tried this code before,but my code is like this <table> <tbody> <tr> <td>{"Id"</td> <td>1</td> </tr> </tbody> </table> <table> <tbody> <tr> <td>{"Id"</td> <td>1</td> </tr> <tr> <td>"FirstName"</td> <td>null</td> </tr> </tbody> </table> — B-CHI
– B-CHI, Commented Apr 25, 2016 at 7:13
@AnoopLL No.I have 13 parameters.first this code creates a table with the firs parameter,second time it creates a table with my first parameter+second parameter.at the end I have 13 table that my 13 table contains all the parameter — B-CHI
– B-CHI, Commented Apr 25, 2016 at 7:28
@balouchi..just write spl2 = content; instead of spl2 += content; in for loop. as i mentioned below in answer. it will solve your problem — Dhara Parmar
– Dhara Parmar, Commented Apr 25, 2016 at 7:31

Dhara Parmar · Accepted Answer · 2016-04-25 07:32:34Z

1

as you were adding table in for loop, so it was creating table for each item.Try this:

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var str = dataItem.Description;
var spl = str.split(','), part;
var spl2 = "";
content ="<table>"
 for (var i = 0; i < spl.length; i++) {
     part = spl[i].split(':');
     content += "<tr><td>" + part[0] + "</td>" + "<td>" + part[1] + "</td></tr>";
     spl2 = content;
 }
content += "</table>"

// you can also assign spl2 = content; over here.
    var desc = "<div id='openModal' class='modalDialog'>" + "<span>" +
        spl2
        + "</span><br/>" +
        +  "</div>";

edited Apr 25, 2016 at 7:32

answered Apr 25, 2016 at 7:02

Dhara Parmar

8,1231 gold badge19 silver badges27 bronze badges

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

Comments

LazyDeveloper · Accepted Answer · 2016-04-25 07:03:43Z

0

    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var str = dataItem.Description;
var spl = str.split(','), part;
var spl2 = "";
var content = "<table>";
 for (var i = 0; i < spl.length; i++) {
     part = spl[i].split(':');
     content += "<tr><td>" + part[0] + "</td>" + "<td>" + part[1] + "</td></tr>";
     spl2 += content;
 }
content += "</table>"
var desc = "<div id='openModal' class='modalDialog'>" + "<span>" +
    spl2
    + "</span><br/>" +
    +  "</div>";

Updated your script

answered Apr 25, 2016 at 7:03

LazyDeveloper

6094 silver badges8 bronze badges

1 Comment

LazyDeveloper Over a year ago

check it as the <table> tag is outside the for loop this should not happen ,can you check again with the above code

Collectives™ on Stack Overflow

How to create a dynamic table in jQuery?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related