Applicando Bootstrap “table-striped” dopo aver creato le righe della tabella dynamicmente

Sto cercando di assicurarmi che lo stile CSS con striping della table-stripped Bootstrap di Twitter venga applicato a una tabella le cui righe vengono aggiunte dynamicmente 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:

 
Heading A Heading B Heading C

Quindi eseguo questo codice JavaScript:

 for (var i = 0; i  tbody:last').before('' + i +'bc'); } 

Otterrò le mie 5 nuove righe, ma non avranno lo stile applicato alla table-stripped .

Anche se aggiungo manualmente la class dopo averla creata, non fa alcuna differenza.

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

Ho creato un esempio jsFiddle in modo che tu possa vederlo funzionare.

Dovresti usare append a tbody anzichè prima . Il modo in cui ora è, le righe vengono aggiunte al di fuori di tbody .

Cambiando solo questa linea:

 $('#table2 > tbody:last').append('' + i +'bc'); 

Sembra che il tuo jsFiddle funzioni.

Passare a .append() al

e correggere anche la chiusura mancante .

dimostrazione

 $('#table2 > tbody').append('' + i +'bc'); 

Usando .before() stavi inserendo le righe prima del tbody che ha causato la mancata applicazione dello stile perché lo stile Bootstrap ha come target le righe che sono figli del tbody.