1

我正在使用Twitter Bootstrap v 2.0.1，并为我的表提供了 table-striped 类。如果单击，我正在尝试更改行颜色。除了没有条纹颜色的每个 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

好吧，既然它们是通过使用创建的：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
});
于 2012-09-27T15:10:18.047 回答
0

table-striped is a class on the table, not the <tr> or siblings, so either create a new class to toggle on <tr> or jQuery parents('table') or change $(this) to $('table.table')

In the end I think you want to keep the striping on all the other rows, and change the current selected, if that is the case then use the first suggestion and override with a new css class on $(this) Don't remove table-striped and make sure your new class has a higher specificity.

于 2012-09-27T15:13:27.027 回答