我怎样才能把一个Twitter的引导表中的背景颜色TR?(How can I remove a ba

2019-10-17 06:21发布

我使用Twitter的引导 v 2.0.1,并给予我的表的表条纹类。 我想,如果点击更改行的颜色。 这个工程除了每n很大:第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的尝试(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>

我究竟做错了什么?

Answer 1:

好了,因为它们是通过创建: tr:nth-child(odd) td ,我们不能简单地“删除”之类的表格条纹 ,因为它会影响整个表。

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

而做到这一点,而不是:

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


Answer 2:

表条纹在桌子上的一类,而不是<tr>或兄弟姐妹,所以无论是创建一个新类来打开<tr>或jQuery的parents('table')或更改$(this) ,以$('table.table')

最后,我想你想保持对所有其他行的条带化,并改变当前选择的,如果是这样的话,那么使用第一个建议,并覆盖有一个新的CSS类的$(this)不要删除表-striped并确保你的新类具有较高的特异性。



文章来源: How can I remove a background tr color from a Twitter Bootstrap table?