twitter bootstrap dynamicly generated table not responsive

Question

My Twitter bootstrap tables are responsive. That is necessary for the Ipad visitars when they turn the screen vertical. In one situation an table is generated by Javascript. When that happens this particular table is not responsive anymore. Is there an solution for this?

Code javascript:

var div = $('#mijn_abonnement table');
    var table = '<thead><tr><th>Module</th><th>Aantal</th><th>Maandprijs</th><th></tr></thead>'+
                    '<tbody>';
                    var total = 0;
                    $.each(data, function( index, item ) {
                        var price = parseFloat(item.realprice);
                        if(!isNaN(price)){
                            total = total + price;
                        }
                        if(item.prijs != '0,00'){                                   
                            table += '<tr>';
                                table += '<td>'+item.naam+'</td>';
                                table += '<td>'+item.counter+'</td>';
                                table += '<td>'+accounting.formatMoney(item.one_prijs, "€ ", 2, ".", ",")+'</td>';
                                table += '<td>'+accounting.formatMoney(item.realprice, "€ ", 2, ".", ",")+'</td>';
                            table += '</tr>';
                        }
                    });
                    table += '<tr class="success"><td></td><td></td><td align="right"><b>Subtotaal (ex.BTW)</b></td><td>'+accounting.formatMoney(total, "€ ", 2, ".", ",")+'</td></tr>';
                    table += '<tr class="success"><td></td><td></td><td align="right"><b>BTW (21%)</b></td><td>'+accounting.formatMoney(total * 0.21, "€ ", 2, ".", ",")+'</td></tr>';
                    table += '<tr class="success"><td></td><td></td><td align="right"><b>Totaal</b></td><td>'+accounting.formatMoney(total * 1.21, "€ ", 2, ".", ",")+'</td></tr>';
           table += '</tbody>';
    div.append(table);

Code HTML:

        <div id="mijn_abonnement">  
            <table class="table table-striped table-bordered table-responsive"></table>
        </div>

Answer 1

Try like this...

var div = $('#mijn_abonnement');
        var table = '<table class='table table-striped table-bordered table-responsive'><thead><tr><th>Module</th><th>Aantal</th><th>Maandprijs</th><th></tr></thead>'+
                        '<tbody>';
                        var total = 0;
                        $.each(data, function( index, item ) {
                            var price = parseFloat(item.realprice);
                            if(!isNaN(price)){
                                total = total + price;
                            }
                            if(item.prijs != '0,00'){                                   
                                table += '<tr>';
                                    table += '<td>'+item.naam+'</td>';
                                    table += '<td>'+item.counter+'</td>';
                                    table += '<td>'+accounting.formatMoney(item.one_prijs, "€ ", 2, ".", ",")+'</td>';
                                    table += '<td>'+accounting.formatMoney(item.realprice, "€ ", 2, ".", ",")+'</td>';
                                table += '</tr>';
                            }
                        });
                        table += '<tr class="success"><td></td><td></td><td align="right"><b>Subtotaal (ex.BTW)</b></td><td>'+accounting.formatMoney(total, "€ ", 2, ".", ",")+'</td></tr>';
                        table += '<tr class="success"><td></td><td></td><td align="right"><b>BTW (21%)</b></td><td>'+accounting.formatMoney(total * 0.21, "€ ", 2, ".", ",")+'</td></tr>';
                        table += '<tr class="success"><td></td><td></td><td align="right"><b>Totaal</b></td><td>'+accounting.formatMoney(total * 1.21, "€ ", 2, ".", ",")+'</td></tr>';
               table += '</tbody></table>';
               div.innerHTML(table);

HTML Code

<div id="mijn_abonnement">  </div>