根据第一列中的值设置html行颜色答案

【问题标题】：Set html row colour depending on the value in the first column根据第一列中的值设置html行颜色
【发布时间】：2020-06-13 05:23:17
【问题描述】：

我在一个页面上有一系列表格，想根据它们的位置设置行颜色。

1 到 3 是金、银和铜。

4 - 10 将是绿色的。

然后剩下的只是保持引导表条带化。我正在尝试使用 javascript 来解决此问题，但我真的不知道如何解决它。

这是其中一张表（页面上有 9 个，都非常相似）：

<table class="table table-sm table-striped text-left">
    <thead class="text-white bg-info">
        <tr>
           <th scope="col">#</th>
           <th scope="col">Team</th>
           <th scope="col">Principal</th>
           <th scope="col">Last Race</th>
           <th scope="col">Points</th>
        </tr>
    </thead>
    <tbody>
    {% for row in tbls.league %}
        <tr>
            <td scope="row" class="counterCell"></td>
            <td>{{ row.TEAM_NAME }}</td>
            <td>{{ row.user }}</td>
            <td>{{ row.LAST_RACE }}</td>
            <td>{{ row.POINTS }}</td>
        </tr>
    {% endfor %}
    </tbody>
</table>

位置列是用一点css计算的：

<style>
    table {
        counter-reset: tableCount;     
    }
    .counterCell:before {              
        content: counter(tableCount); 
        counter-increment: tableCount; 
    }
</style>

所以基本上我想根据该列中的内容更改行的颜色。

【问题讨论】：

标签： python html css

【解决方案1】：

我建议类似

tbody tr td:nth-child(1) {
  background-color: gold;
}

 tbody tr td:nth-child(2) {
  background-color: silver;
}

 tbody tr td:nth-child(3) {
  background-color: bronze;
}

（为您想要的颜色使用正确的代码）

【讨论】：

是的，这是完美的，干杯。我已经对其进行了编辑以使用引导程序并为一行着色，而不仅仅是一列。

【解决方案2】：

感谢 anatolhiman。这基本上只是他为满足我的需要而编辑的答案。

<style>
    tbody tr:nth-child(1) {
        background-color: gold !important;
      }
    tbody tr:nth-child(2) {
        background-color: silver !important;
    }

    tbody tr:nth-child(3) {
        background-color: bronze !important;
    }
</style>

【讨论】：