Question

我正在从数据库中将数据读取到html表中，并且想在第一列的值更改时改变行颜色-没什么花哨的东西只是在两种颜色之间交替来帮助可视地对数据进行分组。我遇到的问题是数据组是动态的，而且我不知道如何根据动态数据更改颜色。我愿意使用CSS，jquery和javascript-可以使用的任何技巧。我创建了一个非常简单的jsFiddle，所有行都具有相同的颜色供您使用。

更新说明： 当我说我希望行颜色根据更改的列值而改变时，我的意思是，当看我的小提琴示例时，表行从aliceblue开始，第一列的值是1。值更改为2我希望表格行将颜色更改为浅绿色。当“键”列的值更改为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

您可以使用：nth-child选择器以及奇数和偶数规则来替换表上的颜色。

更多https://www.w3.org/Style/Examples/007/evenodd.en.html

尝试这样的事情：

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

Answer 2

我添加了一些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>

我希望这会对您有所帮助：）

Answer 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();
    });
});

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

3 个答案: