Question

我正在使用Twitter Bootstrap v 2.0.1并为我的表提供了表条带类。如果点击，我正在尝试更改行颜色。除了每个没有条纹颜色的第n行之外，这种方法很有效。我假设我需要首先删除条纹颜色，但我的尝试失败了。知道我错过了什么吗？

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>

我做错了什么？

Answer 1

因为它们是使用tr: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
});

Answer 2

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

最后我想你想在所有其他行上保持条带化，并更改当前选中的内容，如果是这种情况，那么使用第一个建议并覆盖$('table.table') Don上的新css类删除表条带并确保您的新类具有更高的特异性。

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

2 个答案: