根据单元格的值更改 table 行的 class 行

Question

是否可以根据数据单元格的值更改行 class（使用 bootstrap）？是这样的：（这里我硬编码 class 到行）

这是代码片段

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

使用上面的代码我得到这样的结果：

所以，我的问题是是否可以根据数据值更改 class 行？

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

Answer 1

因为您是通过 JavaScript 生成的，所以这是非常可行的。

在那一行检查是否 feature.properties.datum === 'Nema Servisa'。如果是，请添加 class="success"。如果没有，就不要。

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

在创建 table 时，向每个 td 元素添加一个 class="feature-property"。然后你可以定义这个函数，在table生成后调用它：

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

而 match 将是您要检查的数据值。在这种情况下，Nema Servisa

根据单元格的值更改 table 行的 class 行

Change row class of table based on value of cell

javascript

jquery

bootstrap-modal

twitter-bootstrap-3