10

実行時に行が動的に追加されるテーブルにTwitter Bootstrap CSS スタイルが適用されるようにしようとしています。table-stripped何らかの理由で、私が一番下に到達しようとしているのですが、この特定のスタイルを機能させることができないため、新しい行がストリップされた外観でスタイル設定されます。

したがって、この 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>');
}

table-stripped5 つの新しい行を取得しますが、スタイルは適用されません。

これを使って作成した後に手動でクラスを追加しても違いはありません。

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

jsFiddle サンプルを作成したので、これが実行されていることを確認できます。

4

2 に答える 2

11

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

Changing just this line:

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

Seems to make your jsFiddle work.

于 2013-07-16T08:11:15.003 に答える
4

に変更し.append()、<tbody>欠落している終了も修正します</tr>。

デモ

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

.before()Bootstrap スタイルは tbody の子である行を対象とするため、スタイルが適用されない原因となった tbody の前に行を挿入していました。

于 2013-07-16T08:12:18.867 に答える