Question

我正在使用jQuery bootstrap-table插件，我需要更改所选行的颜色，并在单击下一行时恢复原始颜色。这个小提琴http://jsfiddle.net/haideraliarain/e3nk137y/789/解释了如何做到这一点。但是，我希望我选择的颜色突出显示而不是默认的绿色。我已经尝试使用下面的代码更改颜色，但问题是所选行的颜色在下次单击时更改而不是立即更改。这是我的小提琴https://jsfiddle.net/amotha/1yvr1kun/2/ 如何在当前点击中进行更改？

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="true">
    <thead>
    <tr>
        <th data-field="state" data-checkbox="true" data-visible="false"></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');
        $('.success').css("background-color","#fff");
        $($element).addClass('success');
        $('.success').css("background-color","#00FFFF");
});

Answer 1

完成jsfiddle更改css部分中所需的颜色

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

Answer 2

在CSS中添加自定义类：

tr.custom--success td {
  background-color: #000000; /*custom color here add !important if you don't want the hover color*/
}

然后你的Javascript：

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

JSFiddle：https://jsfiddle.net/8kguL1ow/1/

这应该可以满足您的需求。

如果有任何不清楚的地方，请询问，然后我会更深入地解释为什么以及发生了什么。

Answer 3

我为选定的表背景颜色创建了一个css，如：

<style>
.tblcss{
  background-color: red /* You can use any color of you choice here */
}
</style>

并使用它：

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

检查更新后的Fiddle

Answer 4

试试这个Jsfiddle

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

  });

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

4 个答案: