CODEWITHSUNDEEP
javascriptajaxjquery
oshirowanen
oshirowanen

Reputation: 15925

Appending a table inside a div tag

I have the following loop which is giving me problems

$("#divResults").append('<table>');

$.each( results.d, function( index, record ) {
    $("#divResults").append('<tr><td>' + record.ClientCode + '</td></tr>');
});

$("#divResults").append('</table>');

For some reason based on google chromes developer tools, the above code produces the following html

<table></table>
<tr><td>Code 1</td></tr>
<tr><td>Code 2</td></tr>
<tr><td>Code 3</td></tr>
<tr><td>Code 4</td></tr>
<tr><td>Code 5</td></tr>
<tr><td>Code 6</td></tr>
<tr><td>Code 7</td></tr>

How can this be fixed to produce correct HTML?

Upvotes: 2

Views: 7746

Answers (3)

user1613294
user1613294

Reputation:

you can also do this by dom : document.getElementById('divResults).innerHTML= "<table><tr><td>Hi ! I am new table</td></tr></table>"

Upvotes: 0

Yorgo
Yorgo

Reputation: 2678

var table = $("<table></table>");

$.each( results.d, function( index, record ) {
    var row = $("<tr></tr>");
    var cell = $("<td></td>").text(record.ClientCode).appendTo(row);
    table.append(row);
});
$("#divResults").append(table);

Upvotes: 0

Quentin
Quentin

Reputation: 943240

jQuery operates on elements not tags.

You can't append a start tag, then some content, then an end tag.

var html = '<table>';
$.each( results.d, function( index, record ) {
    html += '<tr><td>' + record.ClientCode + '</td></tr>';
});
html += '</table>';
$("#divResults").append(html);

Upvotes: 7

Related Questions