Dynamic Table rows not displaying in correct sequence in DOM

Question

 success: function (data, status) {
            var header = $("#MainDiv");

            header.html(null);
            var headertemplate = $("<table class='searchlistbody'><tr></th><th>Name</th></tr>");
            header.append(headertemplate);

            $.each(data, function () {
                var template = $("<tr> <td class='campnameAltrow'><span class='searchListTitle'></span></td></tr>");

                        template.find('span.searchListTitle').attr('title', this.Title);

                // add the template to the collection
                header.append(template);
            });
            header.append("</table>");
        },

Now when I was trying to set the border on the table I noticed that it was only applying border on th tags i.e. Header (Name).

 Debugging further in fire bug I saw that the DOM sequence is in this format
        <table class='searchlistbody'><tr><th>Name</th></tr></table>
        <tr> <td class='campnameAltrow'>Test</td></tr>
        <tr> <td class='campnameAltrow'>Test</td></tr>
        <tr> <td class='campnameAltrow'>Test</td></tr>
        <tr> <td class='campnameAltrow'>Test</td></tr>
        <tr> <td class='campnameAltrow'>Test</td></tr>

Can anyone please tell me why is the table closing before appending all the for loop rows....Its an AJAX Call

keymone · Accepted Answer · 2012-12-17 16:54:54Z

1

judging from the documentation of append function: http://api.jquery.com/append/ it actually tries to work with proper DOM elements

do NOT try to use it as string concatenation operation

instead try creating your table element and appending TH and TRs there separately:

var table = $("<table ...></table>")
table.append("<th>...</th>")
$.each(function() {
  ...
  table.append("<tr>...</tr>")
  ...
})

answered Dec 17, 2012 at 16:54

keymone

8,1121 gold badge31 silver badges34 bronze badges

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

Comments

Musa · Accepted Answer · 2012-12-17 16:52:30Z

0

You can't add elements in pieced to the dom. So you add a table to header, then you append rows to the table

 success: function (data, status) {
            var header = $("#MainDiv");

            header.html(null);
            var headertemplate = $("<table class='searchlistbody'><tr></th><th>Name</th></tr></table>");
            header.append(headertemplate);

            $.each(data, function () {
                var template = $("<tr> <td class='campnameAltrow'><span class='searchListTitle'></span></td></tr>");

                        template.find('span.searchListTitle').attr('title', this.Title);

                // add the template to the collection
                headertemplate.append(template);
            });
        },

answered Dec 17, 2012 at 16:52

Musa

97.9k17 gold badges123 silver badges144 bronze badges

1 Comment

Scorpio Over a year ago

Manipulating DOM has very inconsistent behaviors,,,,can you please point me to some good article or any book which can help me learn better .... @Musa

Collectives™ on Stack Overflow

Dynamic Table rows not displaying in correct sequence in DOM

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