Farben von Werten in Tabellen per JS/CSS/Ajax ändern

[tfact129]

Hallo,
ich habe hier ein kleines JS Code Snippet, welches mir aus einer csv Datei auf dem Server
auf der Webseite eine Tabelle darstellt. Es erstellt einen Tabellen Header und dann je nach
Anzahl der Werte in der csv Datei die entsprechende Anzahl an Spalten und Zeilen

Nun hätte ich gerne bestimmte Werte in Rot dargestellt, wenn sie zB 100 überschreiten.

Dazu habe ich ein weiteres kurzes Snippet gefunden, welches ich nun mit dem anderen JS
kombinieren möchte. Leider führt mein Versuch dazu, dass lediglich der erste Wert in den
Tabellenzeilen in Rot dargestellt wird. Die anderen Werte bleiben unverändert in ihrer
Farbe, obwohl sie den Wert überschreiten. Ich dachte die Funktion läuft in einer Schleife für
alle Zellen durch?!?

Die beiden kombinierten Snippets habe nicht ich programmiert.
Könnte mir da jemand mal behilflich sein? So hatte ich es versucht

Danke schonmal
Joe

<script>
$(document).ready(function(){
 setInterval(function ( ) {$('#load_data').ready(function(){
  $.ajax({
   url:"file.csv",
   dataType:"text",
   success:function(data)
   {
    var po_data = data.split(/\r?\n|\r/);
   // var table_data = '<table class="table table-bordered table-striped">';
    var table_data = '<table id = "ajaxtable">';
    for(var count = 0; count<po_data.length; count++)
    {
     var cell_data = po_data[count].split(",");
     table_data += '<tr>';
     for(var cell_count=0; cell_count<cell_data.length; cell_count++)
     {
      if(count === 0)
      {
       table_data += '<th>'+cell_data[cell_count]+'</th>';
      }
      else
      {
      
<!-- start cell data color -->     
$(function () {
    // cell_data Color
    var cell_data = parseInt($('#cell_data').text().trim());
    var color = 'black';
    if (!isNaN(cell_data)) {
        if (cell_data > 100) {
            color = 'red';
        }
        $('#cell_data').css('color', color);
    }
});
<!-- ende cell data color -->           
       table_data += '<td><span id="cell_data">'+cell_data[cell_count]+'</span></td>';
      }
     }
     table_data += '</tr>';
    }
    table_data += '</table>';
    $('#po_table').html(table_data);
   }   
   });
 });
         }, 10000 ) ;
});
</script>

 

[Sempervivum]

Ich schlage vor, die Farbe gleich beim Generieren zu setzen:

<script>
$(document).ready(function(){
setInterval(function ( ) {$('#load_data').ready(function(){
  var limit = 100; // der Wert oberhalb dessen die Farbe geändert werden soll
  $.ajax({
   url:"file.csv",
   dataType:"text",
   success:function(data)
   {
    var po_data = data.split(/\r?\n|\r/);
   // var table_data = '<table class="table table-bordered table-striped">';
    var table_data = '<table id = "ajaxtable">';
    for(var count = 0; count<po_data.length; count++)
    {
     var cell_data = po_data[count].split(",");
     table_data += '<tr>';
     for(var cell_count=0; cell_count<cell_data.length; cell_count++)
     {
      if(count === 0)
      {
       table_data += '<th>'+cell_data[cell_count]+'</th>';
      }
      else
      {
       if (cell_data[cell_count] > limit) vclass = ' class="gt-limit"';
       else vclass='';
       table_data += '<td + vclass + '>'+cell_data[cell_count]+'</td>';
      }
     }
     table_data += '</tr>';
    }
    table_data += '</table>';
    $('#po_table').html(table_data);
   }
   });
});
         }, 10000 ) ;
});
</script>

und dann mit CSS die Farbe setzen:

.gt-limit {
    color: red;
}

(ungetestet).

 

[Sempervivum]

PS: Es war nicht so günstig, sich auf den Wert 100 festzulegen, ich habe es so editiert, dass die Grenze in einer Variablen gesetzt wird. Falls Du es schon gelesen hast, die Seite aktualisieren.

 

[tfact129]

Hallo, suuper Lösung!! Läuft einwandfrei.
Die Grenze als Variable zu setzen ist sehr gut für zukünftige Änderungen.
Ein dickes Dankeschön

Joe