Таблица начальной загрузки: я не могу получить задание фона для первой строки с таким же приоритетом?

Question

У меня есть загрузочный стол. Который выглядит как

Как видите, у меня один высокий приоритет на красном фоне. Я хочу, чтобы первая среда была желтой, а первая - другой. Я пытаюсь сделать это в стиле ячеек данных. Есть ли другие лучшие способы, которые я могу сделать здесь?

То, что я пробовал до сих пор.

var i = 0;
  function colorPriority(value, row, index){
    var classes = ['danger', 'warning', 'secondary'];
    if(value == "high"){  
      if(i == 0){
        i++;  
        return {
          classes: classes[0]
        }
      }    
    }
    if(value == "medium"){ 
    i--; 
      if(i == 0){
        i++;
        return {
          classes: classes[1]
        }
      }    
    }

  }

Answer 1

Что бы я сделал, это для таблицы с id = table_one с field = directing_field и значениями 1,2,3, соответственно, являющимися опасностью, предупреждением, цветом информации, я бы добавил в js

var danger_cell = 0;
var warning_cell = 0;
var info_cell = 0;
if ($("#table_one").length > 0){
     $("#table_one").bootstrapTable({
          cellStyle: function cellStyle(value,index,field) {
               if (field==='directing_field') {
                    if (value===1) {
                         if ((danger_cell===0) || (index < danger_cell)) {
                              danger_cell = index;
                              return { classes:'bg-danger' }
                         } else {return} 
                    } else if (value===2) {
                         if ((warning_cell===0) || (index < warning_cell)) {
                              warning_cell = index;
                              return { classes:'bg-warning' }
                         } else {return}
                    } else if (value===3) {
                         if ((info_cell===0) || (index < info_cell)) {
                              info_cell = index;
                              return { classes:'bg-info' }
                         } else {return}
                    } else {return}
               } 
          },
          onSort: function () {
               danger_cell = 0;
               warning_cell = 0;
               info_cell = 0;
          },
          onRefresh: function () {
               danger_cell = 0;
               warning_cell = 0;
               info_cell = 0;
          }
     });
}

Конечно, если ваша таблица представляет собой чистый HTML, если он создан в JS, просто добавьте параметры в свою ...

Answer 2

Если бы это был я, я бы, вероятно, просто отказался от дополнительного JS и вместо этого просто позволил бы css сделать это для вас с селектором атрибута, добавив один со значением строки ячейки в качестве атрибута, и все будет сделано как;

HTML: <td data-priority="High">High</td>

CSS: [data-priority="High"]:first-of-type {background:red}

Поскольку вы знаете, что строка будет фиксированной "High", "Medium", "Low" в этом случае ...