jquery - 如何根据表格单元格中的值更改表格行的背景颜色?
问题描述
我正在使用 Angular*ngFor
指令生成动态表。这是下面的结构:
<tr *ngFor = 'let element of ph'>
<td>{{element.timestamp}}</td>
<td>{{element.ph}}</td>
</tr>
我想为包含 20 < PH 值 < 50 的整个表格行着色。我该怎么做?
解决方案
[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;
}
PS:我并不是在建议这种[ngStyle]
方法,因为编写内联样式并不是一个好习惯。
推荐阅读
- javascript - 我想在 ReactJs 的 onClick 中有 2 种方法,但它不起作用
- reactjs - 在 React 中使用 Slick.js 与“infinite: true”,幻灯片被渲染多次
- css - 如何删除活动选项卡下的边框
- rest - 如何在 Insomnia 上禁用主机名验证
- java - 使用给定的模数和指数加密字符串
- c++ - 绘制许多矩形时开罗性能极差(C++,gtkmm)
- ios - 比较两个日期以获取组件
- mysql - 使用查询结果向结果 SQL 添加另一列
- c - ESP8266-来自UART的缓冲存储容量
- java - 在 GitLab CICD 中注入 application.properties 值