Override bootstrap-table ausgewählte Zeile Hintergrundfarbe

Question

Ich benutze jQuery Bootstrap-Tabelle-Plugin und ich muss die Farbe der ausgewählten Zeile ändern und die ursprüngliche Farbe wiederherstellen, wenn ich auf die nächste Zeile klicke. Diese Geige http://jsfiddle.net/haideraliarain/e3nk137y/789/ erklärt, wie dies zu tun ist. Allerdings hätte ich gerne das Farbhighlight meiner Wahl anstelle des Standard-Grüns. Ich habe das mit dem unten stehenden Code versucht, der die Farbe ändert, aber das Problem ist, dass sich die Farbe der ausgewählten Zeile beim nächsten Klick ändert und nicht sofort. Hier ist meine Geige https://jsfiddle.net/amotha/1yvr1kun/2/ Wie kann ich die Änderung auf dem aktuellen Klick geschehen lassen?

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

getan jsfiddle Änderung der Farbe, die Sie in der CSS-Teil wollen

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

Answer 2

ich eine CSS für ausgewählte Tabelle Hintergrund erstellt haben Farbe wie:

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

und es verwenden:

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

Überprüfen Sie die aktualisierte Fiddle

Answer 3

eine benutzerdefinierte Klasse in CSS hinzufügen:

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

Dann wird Ihr 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/

Dies sollte Ihnen geben, was Sie brauchen.

Wenn etwas unklar ist, bitte fragen, dann erkläre ich etwas genauer, warum und was vor sich geht.

Answer 4

Versuchen Sie, diese Jsfiddle

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

    });