jQuery Tables iterieren Zeilen und Wechselzelle Hintergrund

Question

Ich versuche, alle Zellen in einer Spalte (Spaltenindex 1) in einer Datatable iterieren und die Hintergrundfarbe ändern Sie den folgenden Code auf Basis von Zellwert mit:

var table = $('#my_table').DataTable({...}); 
console.log("next, iterate over rows in table: "+table); 
table.rows().every(function (rowIdx, tableLoop, rowLoop) { 
    console.log("looping over rows"); 
    var cell = table.cell({ row: rowIdx, column: 1 }).node(); 
    if (cell.data() == 'mouse'){ 
     $(cell).css('background-color', 'orange'); 
    } 
}); 
console.log("finished iterating over rows "); 

Die Tabelle zeigt die Daten in Ordnung an. jedoch die Konsolenprotokoll druckt:

>>next, iterate over rows, table: [object Object] 
>>finished iterating over rows 

dh die

table.rows().every(function (...){...} 

nicht eingetragen ist. Ich habe aus DataTables-Beispielen kopiert und eingefügt, und ich habe keine Ahnung, warum es nicht ausgeführt wird.

Die einzige Sache, die ich denken kann, ist, dass die DataTables Dokumente hier: https://datatables.net/reference/api/rows().every() Erwähnung-Iterate über jede ausgewählte Reihe. Keine der Zeilen in der Tabelle sind ausgewählt, ich möchte nur durch jede Zeile durchlaufen (und Zellfarbe ändern) ob es ausgewählt ist oder nicht.

Hinweis ich auch versucht:

table.rows().eq(0).each(function (index) { 
    var row = table.row(index); 
    var data = row.data(); 
    console.log(data) 
}); 

Und dies entweder nicht ausgeführt wird (console.log etwas druckt nicht aus dem Inneren der Funktion).

Answer 1

Sie können über die Elemente td der Tabelle iterieren und den Textinhalt jeder Zelle erfassen.

Wenden Sie einige Logik auf diese und Sie können einfach die Hintergrundfarbe jeder Zelle zuweisen.

Ich habe arr.map() verwendet, da es ES6 JavaScript ist, aber .each() funktioniert auch.

$('table td').map(function(i, cell) { 
    var cellContent = $(cell).text(); 
    console.log(i,cellContent); // for demonstration 
    if (cellContent === 'pending') $(cell).css('background-color', '#ccc'); 
}); 

Dies kann leicht geändert werden, um die Daten, die Klasse oder die ID des Zellenelements zu erhalten.