覆蓋引導表選定的行背景顏色

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');
});

檢查更新的小提琴

Answer 4

試試這個Jsfiddle

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

  });