Applicare Bootstrap "table-striped" dopo aver creato dinamicamente le righe della tabella

Question

Sto provando a garantire che lo stile CSS Twitter Bootstraptable-stripped venga applicato a una tabella le cui righe vengono aggiunte dinamicamente in fase di runtime. Per qualche ragione, che sto cercando di arrivare a fondo, non riesco a far funzionare questo particolare stile in modo che le mie nuove righe siano in stile con l'aspetto spogliato.

Quindi, se ho questo HTML con table-stripped incluso:

<table class="table table-bordered table-striped table-condensed table-hover" id="table2"> 
    <thead> 
     <tr> 
      <th>Heading A</th> 
      <th>Heading B</th> 
      <th>Heading C</th> 
     </tr> 
    </thead> 
    <tbody></tbody> 
</table> 

Poi ho eseguire questo codice JavaScript:

for (var i = 0; i < 5; i++) 
{ 
    $('#table2 > tbody:last').before('<tr><td>' + i +'</td><td>b</td><td>c</td>'); 
} 

Prendo i miei 5 nuove righe, ma non avrà il Stile table-stripped applicato.

Anche se aggiungo manualmente la classe dopo averlo creato, non fa alcuna differenza.

$('#table2').addClass('table-hover'); 

Ho creato un jsFiddle sample in modo da poter vedere questo in esecuzione.

Answer 1

Si dovrebbe usare accoda a tbody invece di prima. Il modo in cui è ora, le righe vengono aggiunte al di fuori di tbody.

La modifica solo questa linea:

$('#table2 > tbody:last').append('<tr><td>' + i +'</td><td>b</td><td>c</td>'); 

sembra rendere il vostro lavoro jsFiddle.

Answer 2

passare a .append() a <tbody> e correggere anche la chiusura mancante </tr>.

Demo

$('#table2 > tbody').append('<tr><td>' + i +'</td><td>b</td><td>c</td></tr>'); 

Utilizzando .before() si stava inserendo le righe prima del tbody che ha causato lo stile non deve essere applicata perché lo stile Bootstrap rivolge righe che sono figli del tbody.