覆盖bootstrap-table选中的行背景颜色

时间:2016-10-13 11:56:22

标签: javascript jquery html css twitter-bootstrap

我使用jQuery bootstrap-table插件,我需要更改选中行的颜色,并在取消选中时恢复原始颜色。这个小提琴https://jsfiddle.net/1yvr1kun/4/显示了当事件是点击时如何执行此操作。我试图在检查事件上实现这个想法,但是检查的行不会以设置颜色突出显示。这是我的小提琴http://jsfiddle.net/amotha/e3nk137y/9186/如何在已选中的行上进行更改并在未选中时进行反转?

HTML:

<table id="table" data-toggle="table"
       data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data1/"
       data-click-to-select="true"
       data-single-select="false">
    <thead>
    <tr>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="name">Name</th>
        <th data-field="stargazers_count">Stars</th>
        <th data-field="forks_count">Forks</th>
        <th data-field="description">Description</th>
    </tr>
    </thead>
</table>

JS:

$('#table').on('click-row.bs.table', function (e, row, $element) {
        $('.success').removeClass('success');
        $($element).addClass('success');
});

CSS:

.success td{
    background-color:red !important;
}

1 个答案:

答案 0 :(得分:0)

只需在css上更改班级名称

.success td{
    background-color:red !important;
}

.selected td{
    background-color:#b1d54f !important;
}

http://jsfiddle.net/e3nk137y/9196/