基于列值更改的备用表行背景颜色答案

【问题标题】：Alternate Table Row Background Color Based on Column Value Changing基于列值更改的备用表行背景颜色
【发布时间】：2019-05-30 03:32:45
【问题描述】：

我正在将数据从数据库读取到 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>

【问题讨论】：

css :nth-child 选择器可用于每第 n 行盲目着色，但不确定“基于 col 值”是什么意思。它应该只是特定值的特定颜色吗？
你的意思是它应该基于奇/偶值？还是基于价值变化？

标签： javascript jquery css html-table

【解决方案1】：

我添加了一些 javascript 逻辑以使其工作。我添加了两个场景。一个 if 类应该基于奇/偶值，另一个是 if 类应该基于值变化。

请看下面的片段：

$(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>

希望对你有帮助:)

【讨论】：

【解决方案2】：

您可以使用 :nth-child 选择器和奇偶规则在表格上交替颜色。

试试这样的：

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

【讨论】：

【解决方案3】：

如果要获取列中的整个字符串，请使用

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

【讨论】：