動態創建表格行後應用Bootstrap「表格條紋」

Question

我試圖確保Twitter Bootstraptable-stripped CSS樣式應用於在運行時動態添加行的表格。出於某種原因，我試圖深入到底，我無法得到這種特定的風格，因此我的新行的樣式與剝離的外觀。

所以，如果我有這樣的HTML與table-stripped包括：

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

然後我運行這段JavaScript代碼：

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

我會得到我的5個新行，但他們不會有table-stripped風格應用。

即使我在創建後使用這個手動添加類，它沒有區別。

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

我已經創建了一個jsFiddle sample所以你可以看到這個運行。

Answer 1

您應該使用前追加到TBODY，而不是。現在的方式是，行被添加到tbody之外。

改變只是這一行：

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

似乎讓你的jsfiddle工作。

Answer 2

更改爲.append()爲<tbody>並且還修復了您遺漏的關閉</tr>。

Demo

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

使用.before()你將造成不被應用，因爲引導式的靶向是tbody的孩子行的風格TBODY前行。