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

Answer 1

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