如何从 Twitter Bootstrap 表中删除背景色？答案

【问题标题】：How can I remove a background tr color from a Twitter Bootstrap table?如何从 Twitter Bootstrap 表中删除背景色？
【发布时间】：2012-09-27 23:13:27
【问题描述】：

我正在使用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>

我做错了什么？

【问题讨论】：

标签： jquery css twitter-bootstrap

【解决方案1】：

既然它们是通过使用：tr:nth-child(odd) td 创建的，我们不能简单地“删除”类 table-striped，因为它会影响整个表。

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

改为这样做：

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

【讨论】：

有道理...您的建议有效，感谢您的帮助！
是否可以将切换与 css 选择器一起使用？用户可以定义背景颜色，所以最终我想切换： $(this).find('td').css('background-color', '#ff0000');

【解决方案2】：

table-striped 是 table 上的一个类，而不是 <tr> 或兄弟姐妹，所以要么创建一个新类来切换 <tr> 或 jQuery parents('table')，要么将 $(this) 更改为 $('table.table')

最后，我认为您希望在所有其他行上保持条带化，并更改当前选定的行，如果是这种情况，请使用第一个建议并在 $(this) 上用新的 css 类覆盖不要删除 table-striped 并确保您的新类具有更高的特异性。

【讨论】：