动态创建表格行后应用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前行。