jquery datable highlight einzelne Zeile

Question

Ich versuche, eine einzelne Zeile in meiner jquery Datentabelle hervorzuheben.

ich versuchte, hier die Informationen zu verwenden: https://datatables.net/examples/api/select_single_row.html

dass Verwendung, ich Chrome Inspektoren verwenden kann, und ich kann bestätigen, dass die Klasse mit der Zeilentabelle hinzugefügt wird.

Die Zeile wird jedoch nicht hervorgehoben. Hier

ist die jquery:

// not sure if this was necessary to show 
$('#example1').DataTable({ 
    "iDisplayLength": 25, 
    "order": [[ 6, "desc" ]], 
    "scrollY": 550, 
    "scrollX": true, 
    "bDestroy": true, 
    "stateSave": true 
}); 

var table = $('#example1').DataTable(); 
$('#example1 tbody').on('click', 'tr', function() 
{ 
    if($(this).hasClass('selected')){ 
    $(this).removeClass('selected'); 
    } 
    else{ 
    table.$('tr.selected').removeClass('selected'); 
    $(this).addClass('selected'); 
    } 
}); 

Mit dieser, wie gesagt, kann ich sehen, die Klasse zu der Zeile hinzugefügt wird, ich bin einfach nicht die Zeile Farbwechsel zu sehen.

Ich habe einige CSS auf der HTML-Seite hinzugefügt, um zu sehen, ob es funktionieren würde. Wie folgt:

<style> 
    .selected tr {background-color: blue;} 
</style> 

Ohne Erfolg.

Kann jemand meinen Fehler sehen? Bitte helfen Sie.

Vielen Dank im Voraus.

Answer 1

Ich kann dies nicht testen, aber der Fehler scheint in der CSS-Selektor zu sein, den Sie für die background-color verwenden.

Es sollte tr.selected (a tr Element mit der Klasse selected) und nicht .selected tr (ein tr Element in einem Element mit der Klasse .selected) sein.

Answer 2

Stellen Sie sicher, dass Sie jquery.dataTables.min.css laden.

Answer 3

Vielleicht können Sie die jQuery click Funktion und eine wenig JS Logik Spur

https://jsfiddle.net/moongod101/mbLnrcg6/