根据单元格的值更改表的行类

Question

Is it possible to change row class (using bootstrap) based of value of data cell? Something like this: (here I hard coded class into row)

Here is fragment of code

 onEachFeature: function (feature, layer) {
    if (feature.properties) {
      var content = "<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>Šifra trafostanice</th><td>" + feature.properties.ts_sifra + 
      "</td></tr>" + "<tr><th>Name</th><td>" + feature.properties.ts_naziv + "</td></tr>" +  
      "<tr><th>Code</th><td>" + feature.properties.sifra_lampe + "</td></tr>" +
      "<tr><th>Power</th><td>" + feature.properties.tip_lampe + "</td></tr>" +
      "<tr><th>Pole type</th><td>" + feature.properties.vrsta_stupa + "</td></tr>" +
      "<tr><th>Adress</th><td>" + feature.properties.adresa + "</td></tr>" +
      "<tr><th>Services</th><td>" + feature.properties.datum + "</td></tr>" 
      "</table>";.....

Using code above i get something like this:

So, my question is is it possible to change class of row based of data value?

(Example if value of table row Services is 'Nema servisa' add class success else leave row unchanged)

Answer 1

Since you are generating this via JavaScript yes this is very doable.

On that row just check to see if feature.properties.datum === 'Nema Servisa' . If yes, add class="success" . If not, don't.

onEachFeature: function (feature, layer) {
   if (feature.properties) {
     var content = "<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>Šifra trafostanice</th><td>" + feature.properties.ts_sifra + 
     "</td></tr>" + "<tr><th>Name</th><td>" + feature.properties.ts_naziv + "</td></tr>" +  
     "<tr><th>Code</th><td>" + feature.properties.sifra_lampe + "</td></tr>" +
     "<tr><th>Power</th><td>" + feature.properties.tip_lampe + "</td></tr>" +
     "<tr><th>Pole type</th><td>" + feature.properties.vrsta_stupa + "</td></tr>" +
     "<tr><th>Adress</th><td>" + feature.properties.adresa + "</td></tr>" +
     "<tr" + (feature.properties.datum === 'Nema servisa' ? ' class="success"' : '') + "><th>Services</th><td>" + feature.properties.datum + "</td></tr>" 
     "</table>";.....

Answer 2

When creating the table, add a class="feature-property" to each td element. Then you can define this function and call it after the table is generated:

function highlightTableRow(match){
    $('.feature-property').each(function(){
        var value = $(this).html();
        if(value === match){
            $(this).addClass('success');  
        }
    });   
}

And match would be the data value you want to check.. in this case, Nema Servisa