Adding new rows to an existing table

Question

I have the following code which creates a new table.

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

How do I change this so instead of creating a brand new table each time, it adds tr and td data to an already existing table? Where the new data always gets added after the last existing tr/td in the table?

Answer 1

If you already have created html table in #divResults div, you can try:

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

Example

Answer 2

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

You can either do it the first time the way you have then all other times this way. Or you can start out with an empty <table> when the page loads.