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)
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>";.....
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.