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

时间:2018-10-12 17:26:05

标签: jquery html css angular

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

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

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

我想为包含20个

3 个答案:

答案 0 :(得分: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]方法,因为编写内联样式并不是一个好习惯。

答案 1 :(得分:0)

您可以简单地在ph列上使用NgClass指令。 像这样:

<td [ngClass]="{'first': true, 'second': true, 'third': false}">{{element.ph}}</td>

换句话说,如果条件成立,则使用具有特定样式的特定类。

希望有帮助!

答案 2 :(得分:0)

您可以使用[ngClass],但是[ngStyle]更适合于小的样式更改:

<div [ngStyle]="{<property>: <value>}">

针对您的特殊情况:

<tr [ngStyle]="{'background-color': (20<ph && ph<50) ? 'red' : 'white'}">