如何通过索引更改行的颜色

Question

我有一个使用 primeng 进行单元格编辑的表格，其数据由 API 完成，因此该表格永远不会具有相同数量的行和相同的顺序。如果字号错误，我想将行颜色更改为红色；如果字号正确，我想将行颜色更改为绿色。

我想我需要获取编辑行的索引，然后更改颜色。

<p-table [value]="valProd" responsiveLayout="scroll" (onEditInit)="onEditInit($event)" (onEditCancel)="onCancelInit($event)"> 
  <ng-template pTemplate="header"> 
    <tr> 
     <th>Name</th> 
     <th>Value</th> 
     <th>Size</th> 
    </tr> 
  </ng-template> 
   <ng-template pTemplate="body" let-valProd let-rowData> 
      <tr> 
      <td>
        <p-cellEditor>
         <ng-template pTemplate="output">
           {{ rowData.Name}}
         </ng-template>
       </p-cellEditor>
     </td>
         <td [pEditableColumn]="rowData.Value" pEditableColumnField="rowData.Value"> 
          <p-cellEditor [ngStyle]="{'background': colorTry}"> 
           <ng-template pTemplate="input"> 
            <input pInputText 
              type="text" 
              [(ngModel)]="rowData.Value" 
              name="value"
              (change)="checkWriteValue(rowData.Value, rowData.Size, rowData.HasFixedLength, rowData.Name)"
                                (keydown.enter)="checkWriteValue(rowData.Value, rowData.Size, rowData.HasFixedLength, rowData.name)"
> 
          </ng-template> 
          <ng-template pTemplate="output" id="pruebainput"> 
            {{rowData.Value}}
          </ng-template> 
        </p-cellEditor> 
      </td> 

      <td>
        <p-cellEditor>
         <ng-template pTemplate="output">
           {{ rowData.Size}}
         </ng-template>
       </p-cellEditor>
     </td>
   </tr> 
 </ng-template> 
</p-table>   

我尝试使用 ngstyle 但所有行都被绘制了。我需要独立地与他们合作。

目的是当单元格按 Enter 键结束编辑或失去焦点时，检查单词的大小，如果大小正确，则将行背景更改为绿色或红色。可能有多个相同颜色的。

Answer 1

好吧，如果您使用的是 React，一种解决方法是使用一个至少包含 50 种颜色的数组。 然后，您循环遍历数据并动态创建行，并为每一行添加带有基于该索引的背景颜色的内联样式。

const colors = ['#a2a2a2','#e2e2e2','#515151',...];

data.map((item,i)=>(
<row style={{backgroundColor:colors[i]}}></row>
));

---

但是，如果您正在使用 javascript，则可以使用 css :nth-child。并为每行添加背景颜色。