javascript - 基于列值变化的备用表格行背景颜色

Question

我正在从数据库中将数据读取到 html 表中，并希望在第一列中的值发生变化时交替显示行颜色——没有什么特别的，只是在两种颜色之间交替以帮助直观地对数据进行分组。我遇到的问题是数据组是动态的，我不知道如何根据动态数据更改颜色。我愿意使用 CSS、jquery、javascript——无论你有什么技巧都能奏效。我创建了一个非常简单的 jsFiddle所有行的颜色都相同，供您玩。

更新说明: 当我说我希望行颜色根据列值的变化而交替时，我的意思是，当查看我的 fiddle 示例时，表行从 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>

希望对你有帮助:)