Цвет фона строки альтернативной таблицы на основе изменения значения столбца

Question

Я читаю данные в html-таблицу из базы данных и хотел бы менять цвет строки при изменении значения в первом столбце - ничего необычного, просто чередовать два цвета, чтобы визуально сгруппировать данные.У меня проблема в том, что группы данных являются динамическими, и я не знаю, как изменить цвета на основе динамических данных.Я открыт для использования CSS, jquery, javascript - все ваши хитрости будут работать.Я создал очень простой jsFiddle , в котором все строки имеют одинаковый цвет для игры.

ОБНОВЛЕННОЕ ОБЪЯСНЕНИЕ: Когда я говорю, что хочу чередовать цвета строк в зависимости от значения изменения столбца, я имею в виду, что при просмотре моего примера скрипки начинаются строки таблицывыключено aliceblue, и значение в первом столбце равно 1. Когда это значение изменится на 2, я хочу, чтобы строки таблицы изменили цвет на светло-зеленый.Когда значение столбца Key изменится на 3, я хочу, чтобы цвета снова переключились на aliceblue.Когда значение ключевого столбца изменится на 4, я хочу, чтобы оно снова стало светло-зеленым.Надеюсь, это поможет уточнить ...

Как всегда, любая помощь, которую вы можете оказать, будет принята с благодарностью !!

tbody tr {
  background: aliceblue;
}

.altColor {
  background: lightgreen;
}

<div id="banner-message">
    <table>
        <thead>
            <tr>
              <th>Key</th>
              <th>val</th>
            </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>1</td>
          </tr>
          <tr>
            <td>1</td>
            <td>1</td>
          </tr>
          <tr>
            <td>2</td>
            <td>1</td>
          </tr>
          <tr>
            <td>2</td>
            <td>1</td>
          </tr>
          <tr>
            <td>2</td>
            <td>1</td>
          </tr>
          <tr>
            <td>3</td>
            <td>1</td>
          </tr>
          <tr>
            <td>4</td>
            <td>1</td>
          </tr>
          <tr>
            <td>4</td>
            <td>1</td>
          </tr>
          <tr>
            <td>5</td>
            <td>1</td>
          </tr>
          <tr>
            <td>5</td>
            <td>1</td>
          </tr>
          <tr>
            <td>5</td>
            <td>1</td>
          </tr>
        </tbody>
    </table>
</div>

Answer 1

Я добавил немного логики JavaScript, чтобы она работала. Я добавил два сценария. Один, если класс должен быть основан на нечетных / четных значениях, а другой, если класс должен быть основан на изменении значения.

См. Фрагмент ниже:

$(document).ready(function(){
  $("#banner-message tbody tr").each(function() {
    if(parseInt($(this).find("td").first().html()) % 2 == 0){
      $(this).addClass("altColor");
    }
  });
  
  
  let prevValue = parseInt($("#banner-message2 tbody tr").first().find("td").first().html());
  let currentClass = '';
  $("#banner-message2 tbody tr").each(function() {
    if(prevValue != parseInt($(this).find("td").first().html())){
      (currentClass=='')?currentClass = 'altColor':currentClass='';
    }
      $(this).addClass(currentClass);
    prevValue = parseInt($(this).find("td").first().html());
  });
});

tbody tr {
  background: aliceblue;
}

.altColor {
  background: lightgreen;
}

div {
  display:inline-block;
  padding:10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  Based on the Even/Odd values
    <table>
        <thead>
            <tr>
              <th>Key</th>
              <th>val</th>
            </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>1</td>
          </tr>
          <tr>
            <td>1</td>
            <td>1</td>
          </tr>
          <tr>
            <td>2</td>
            <td>1</td>
          </tr>
          <tr>
            <td>2</td>
            <td>1</td>
          </tr>
          <tr>
            <td>2</td>
            <td>1</td>
          </tr>
          <tr>
            <td>3</td>
            <td>1</td>
          </tr>
          <tr>
            <td>4</td>
            <td>1</td>
          </tr>
          <tr>
            <td>4</td>
            <td>1</td>
          </tr>
          <tr>
            <td>5</td>
            <td>1</td>
          </tr>
          <tr>
            <td>5</td>
            <td>1</td>
          </tr>
          <tr>
            <td>5</td>
            <td>1</td>
          </tr>
        </tbody>
    </table>
</div>



<div id="banner-message2">
  Based on the value change
    <table>
        <thead>
            <tr>
              <th>Key</th>
              <th>val</th>
            </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>1</td>
          </tr>
          <tr>
            <td>1</td>
            <td>1</td>
          </tr>
          <tr>
            <td>4</td>
            <td>1</td>
          </tr>
          <tr>
            <td>4</td>
            <td>1</td>
          </tr>
          <tr>
            <td>4</td>
            <td>1</td>
          </tr>
          <tr>
            <td>2</td>
            <td>1</td>
          </tr>
          <tr>
            <td>3</td>
            <td>1</td>
          </tr>
          <tr>
            <td>3</td>
            <td>1</td>
          </tr>
          <tr>
            <td>5</td>
            <td>1</td>
          </tr>
          <tr>
            <td>5</td>
            <td>1</td>
          </tr>
          <tr>
            <td>5</td>
            <td>1</td>
          </tr>
        </tbody>
    </table>
</div>

Надеюсь, это поможет вам:)

Answer 2

Вы можете чередовать цвет таблицы с помощью селектора: nth-child и правил нечетного и четного.

Здесь можно найти больше https://www.w3.org/Style/Examples/007/evenodd.en.html

Попробуйте что-то вроде этого:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}