如何从Twitter Bootstrap表中删除背景色？ [英] How can I remove a background tr color from a Twitter Bootstrap table?

问题描述

我正在使用 Twitter Bootstrap v 2.0.1，并已将表格条纹类。如果点击，我想更改行颜色。这工作伟大，除了每个第n行，没有条纹颜色。我假设我需要先删除条纹的颜色，但我的尝试失败。任何想法我错过了什么？

I'm using Twitter Bootstrap v 2.0.1 and have given my table the table-striped class. I'm trying to change a row color if clicked. This works great except for every n:th row that doesn't have a stripe color. I assume I need to remove the striped color first but my attempt is failing. Any idea what I'm missing?

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尝试：

My jQuery attempt(s):

<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>

我做错了什么？

推荐答案

很好，因为它们是通过使用 tr：nth-​​child（odd）td 创建的，我们不能简单地

Well since they are created by using: tr:nth-child(odd) td, we can't simply "remove" the class table-striped, since it would effect the entire table.

创建自己的类让我们说： .highlightBG {background：＃5279a4; }

Create your own class let's say: .highlightBG { background:#5279a4; }

并执行以下操作：

$('table.table-striped tr').on('click', function () {
    $(this).find('td').addClass('highlightBG');
    // potentially even .toggleClass('highlightBG'); to alternate it
});

这篇关于如何从Twitter Bootstrap表中删除背景色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！