Stosowanie funkcji Bootstrap "rozłożenie tabeli" po dynamicznym utworzeniu wierszy tabeli

Question

Próbuję upewnić się, że styl CSS został zastosowany do tabeli, której wiersze są dodawane dynamicznie w czasie wykonywania. Z jakiegoś powodu, że próbuję dojść do sedna, nie mogę zmusić tego konkretnego stylu do pracy, aby moje nowe rzędy były stylizowane z obnażonym wyglądem.

Więc jeśli mam to HTML z table-stripped obejmowały:

<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> 

Potem uruchomić ten kod JavaScript:

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

Wezmę 5 nowych wierszy, ale oni nie będą mieli Zastosowano styl table-stripped.

Nawet jeśli dodaję klasę ręcznie po utworzeniu tej opcji, nie ma to znaczenia.

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

Stworzyłem jsFiddle sample, dzięki czemu możesz zobaczyć, jak działa.

Answer 1

Należy użyć dołączyć do tbody zamiast przed. Tak jak jest teraz, wiersze są dodawane poza tbody.

Zmiana tylko ten wiersz:

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

wydaje się mieć swój jsFiddle pracy.

Answer 2

Zmień na .append() na <tbody>, a także napraw brakujące zamknięcie </tr>.

Demo

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

Korzystając .before() zostałeś wstawianie wierszy przed tbody który spowodował styl nie może być stosowane, ponieważ styl Bootstrap skierowany wiersze, które są dziećmi tbody.