jquery - 如何根据表格单元格中的值更改表格行的背景颜色？

Question

我正在使用 Angular *ngFor 指令生成动态表。下面是结构:

       <tr *ngFor = 'let element of ph'>
            <td>{{element.timestamp}}</td>
            <td>{{element.ph}}</td>                   
       </tr>

生成的表格的示例图像如下所示。

我想为包含 20 < PH 值 < 50 的整个表格行着色。我该怎么做？

Answer 1

如果值符合您的要求，您可以使用 [ngClass] 并应用一个类。

在这里，使用这个:

<table border="1">
  <thead>
    <td>Reading Time</td>
    <td>PH</td>
  </thead>
  <tbody>
    <tr *ngFor='let element of ph'
      [ngClass]="{'color': (element.ph > 20 && element.ph < 50)}">
      <td>{{element.timestamp}}</td>
      <td>{{element.ph}}</td>
    </tr>
  </tbody>
</table>

或者，按照 Yoel Rodriguez 的建议，您还可以使用 [class.color] 动态应用它:

<table border="1">
  <thead>
    <td>Reading Time</td>
    <td>PH</td>
  </thead>
  <tbody>
    <tr *ngFor='let element of ph'
      [class.color]='element.ph > 20 && element.ph < 50'>
      <td>{{element.timestamp}}</td>
      <td>{{element.ph}}</td>
    </tr>
  </tbody>
</table>

这是 color CSS 类:

.color {
  color: white;
  font-weight: bold;
  background-color: red;
}

Sample StackBlitz

PS:我并不是建议使用 [ngStyle] 方法，因为编写内联样式并不是一个好的做法。