如何为表格中的一行设置样式？

Posted 2023-03-13

【中文标题】如何为表格中的一行设置样式？

【英文标题】：How to style a row in a table?

【发布时间】：2018-07-25 17:12:27

【问题描述】：

我在为表格中的一行设置样式时遇到了一点问题。基本上我的表有 4 行。

a) 如果 Title 5 列下的值小于 0，则整个 行需要为红色

b) 如果 Title 5 列下的值等于 17，则整个 行需要为橙色。

c) 任何其他行不应有任何颜色。

我的大部分工作都在工作。 我的问题是：

如果一行没有任何颜色，我仍然想制作 检查图标 绿色。

这是我的工作代码：

PLUNKER

<p-panel  class="a-panel-checkIn" header='Compliance Tracking' [toggleable]="true" [collapsed]="isPanelCollapsed" [style]=" height: '100%' ">
  <p-table [value]="complianceTracking" [columns]="cols" selectionMode="single">
  <ng-template pTemplate="header" let-columns>
  <tr>
    <th *ngFor="let col of columns">
      col.header
    </th>
  </tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
  <tr [ngClass]="rowData.field5 < 0 ? 'a-danger-row' : (rowData.field5 === 17) ? 'a-yellow-row' : 'a-green-row'">
    <td *ngFor="let col of columns" [ngClass]="rowData[col.field] === '' ? 'a-check-icon' : ''">
      rowData[col.field]
    </td>
  </tr>
  </ng-template>
  </p-table>
</p-panel>

【问题讨论】：

是的，我想从 tex 中删除绿色，但我想保留复选图标上的绿色。有什么想法可以实现吗？

【参考方案1】：

您可以在app.template.html 中为您的第二个ng-template 替换以下代码：

<ng-template pTemplate="body" let-rowData let-columns="columns">
  <tr [ngClass]="rowData.field5 < 0 ? 'a-danger-row' : (rowData.field5 === 17) ? 'a-yellow-row' : ''">
    <!-- <td *ngFor="let col of columns" [ngClass]="rowData[col.field] === '' ? 'a-check-icon' : ''"> -->
    <td *ngFor="let col of columns" [ngClass]="rowData[col.field] === '' ? ((rowData.field5 > 0 && rowData.field5 !== 17) ? 'a-check-icon a-green-check' : 'a-check-icon' ) : ''">
      rowData[col.field]
    </td>
  </tr>
</ng-template>

在您的 styles.css 中，创建一个新的 CSS 规则，如下所示：

.a-green-check 
   color: #A8CF45;

这里是Plunkr

希望这是您想要实现的目标。

【讨论】：

你能提供一个plunker吗？

【参考方案2】：

如下更新您的模板：

<ng-template pTemplate="body" let-rowData let-columns="columns">
  <tr [ngClass]="rowData.field5 < 0 ? 'a-danger-row' : (rowData.field5 === 17) ? 'a-yellow-row' : ''">
    <td *ngFor="let col of columns" [ngClass]="rowData[col.field] === '' ? 'a-check-icon' : ''" class="col.field=='field6' && rowData.field5!==17 && rowData.field5>0  ? 'a-green-row':''">
      rowData[col.field]
    </td>
  </tr>
</ng-template>

输出：