javascript - Override bootstrap-table selected row background color - Stack Overflow

admin管理员组

文章数量:1336633

I'm using jQuery bootstrap-table plugin and I need to change the color of the selected row and restore the original color when I click the next row. This fiddle / explains how to do this. However, I would like to have the color highlight of my choice instead of the default green. I have tried this using the code below which changes the color but problem is that the color of the selected row changes on next click and not immediately. Here is my fiddle / How can I make the change happen on the current click?

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

I'm using jQuery bootstrap-table plugin and I need to change the color of the selected row and restore the original color when I click the next row. This fiddle http://jsfiddle/haideraliarain/e3nk137y/789/ explains how to do this. However, I would like to have the color highlight of my choice instead of the default green. I have tried this using the code below which changes the color but problem is that the color of the selected row changes on next click and not immediately. Here is my fiddle https://jsfiddle/amotha/1yvr1kun/2/ How can I make the change happen on the current click?

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

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Follow asked Oct 13, 2016 at 8:17 amoamo 3,20044 gold badges2727 silver badges4444 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

done jsfiddle change the color that you want in the css part

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

Add a custom class in CSS:

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

Then your Javascript:

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

JSFiddle: https://jsfiddle/8kguL1ow/1/

This should give you what you need.

If anything is unclear, please ask, then I will explain in a bit more depth why and what is going on.

I have created a css for selected table background color like:

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

and use it:

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

Check the updated Fiddle

Try this Jsfiddle

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

  });

本文标签： javascriptOverride bootstraptable selected row background colorStack Overflow