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


我究竟做错了什么?

最佳答案

好吧,由于它们是使用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
});

10-05 20:47
查看更多