Question

我正在尝试确保将Twitter Bootstrap table-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之前插入行导致不应用样式，因为Bootstrap样式的目标行是tbody的子行。

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

2 个答案: