Change row class of table based on value of cell

问题

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)

回答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>";.....

回答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

来源：https://stackoverflow.com/questions/36019352/change-row-class-of-table-based-on-value-of-cell

标签

javascript

jquery

twitter-bootstrap-3

bootstrap-modal