在动态创建表行后应用Bootstrap"table-striped"

Question

我正在尝试确保将Twitter Bootstrap table-stripped CSS样式应用于在运行时动态添加行的表.出于某种原因,我试图找到底部,我无法使这种特殊的风格工作,以便我的新行采用剥离外观进行样式设置.

所以如果我有这个table-stripped包含的HTML :

<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示例,因此您可以看到它正在运行.

Answer 1

你应该使用append to tbody而不是之前.现在的方式是,行被添加到tbody之外.

改变这一行:

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

似乎让你的jsFiddle工作.