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

问题描述

我正在努力确保 table-stripped CSS样式应用于在运行时动态添加行的表。出于某种原因，我试图找到底线，我无法使这种特殊的风格起作用，以便我的新行采用剥离外观设计。

I'm trying to ensure the Twitter Bootstrap table-stripped CSS style is applied to a table whose rows are added dynamically at runtime. For some reason, that I'm trying to get to the bottom of, I can't get this particular style to work so that my new rows are styled with the stripped look.

所以，如果我的HTML包含 table-stripped ，那么：

So if I have this HTML with table-stripped included:

<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代码：

Then I run this JavaScript code:

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

我会得到我的5个新行，但他们没有 table-stripped 样式已应用。

I'll get my 5 new rows but they won't have the table-stripped style applied.

即使我在使用此项创建后手动添加该类，也没有区别。

Even if I add the class manually after creating using this it makes no difference.

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

我创建了一个所以你可以看到这个运行。

I've created a jsFiddle sample so you can see this running.

推荐答案

你应该使用在之前将附加到 tbody 而不是。现在的方式是，行添加在 tbody 之外。

You should use append to tbody instead of before. The way it is now, the rows are added outside of tbody.

更改此行：

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

似乎让你的jsFiddle工作。

Seems to make your jsFiddle work.

这篇关于应用Bootstrap“table-striped”在动态创建表行之后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！