1

私はTwitter Bootstrap v 2.0.1 を使用しており、テーブルにテーブル ストライプ クラスを指定しています。クリックすると行の色を変更しようとしています。これは、ストライプ色を持たないすべての n:th 行を除いてうまく機能します。最初にストライプの色を削除する必要があると思いますが、試みは失敗しています。私が見逃しているものはありますか？

HTML

<table class="table table-bordered table-condensed table-striped">
        <thead>
            <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><strong>Data 1</strong></td>
                <td>Data 2</td>
                <td>Data 3</td>
            </tr>
            <tr>
                <td><strong>Data 1</strong></td>
                <td>Data 2</td>
                <td>Data 3</td>
            </tr>
            <tr>
                <td><strong>Data 1</strong></td>
                <td>Data 2</td>
                <td>Data 3</td>
            </tr>
        </tbody>
    </table>

私のjQueryの試み：

<script type="text/javascript">


$(document).ready(function(){

    $('tr').click( function() {
        $(this).siblings().removeClass('table-striped');
        //$(this).css('background-color', '#ff0000').siblings().removeClass('table-striped');
     });
});

</script>

私は何を間違っていますか？

4

2 に答える 2

2

それらは using: を使用して作成されるため、テーブル全体に影響するため、クラスtable-stripedtr:nth-child(odd) tdを単純に「削除」することはできません。

独自のクラスを作成してみましょう:.highlightBG { background:#5279a4; }

代わりにこれを行います：

$('table.table-striped tr').on('click', function () {
    $(this).find('td').addClass('highlightBG');
    // potentially even .toggleClass('highlightBG'); to alternate it
});
于 2012-09-27T15:10:18.047 に答える