Bootstrap CSS Table Not Showing When Dynamically Created

Question

I have a jquery script that on the occurrence of an event changes a div and adds a table as shown in the following code. The page is based on Bootstrap CSS but the table is not formatted as it should. What am i doing wrong?

$('#regionId').html('<table class="table">');

for (var i = 0; i < data.length; i++) {
$('#regionId').append('<tr><td>'+ data[i].field + ' </td> <td>' + data[i].field2+ '</td></tr>');

}

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

Answer 1

try this demo

$('#regionId').html('<table class="table"><tbody></tbody></table>');
    for (var i = 0; i < data.length; i++) {
        $('#regionId tbody').append('<tr><td>'+ data[i].field
                        + ' </td> <td>'
                            + data[i].field2
                            + '</td></tr>')
    }