Question

当用户基于this example单击多行时，我试图突出显示多行。每次单击一行，我的console.log都会正确输出，这些行永远不会像我期望的那样改变颜色。我想念什么？

我的HTML

<table datatable [dtOptions]="dtOptionsComp" [dtTrigger]="dtTriggerComp" class="row-border hover">
    <thead><tr><th>ID</th><th>Name</th></tr></thead>
    <tbody>
  <tr *ngFor="let d of companylist" (click)="selectCompany($event, d)" [class.highlighted]="d.highlighted">
    <td>{{d.id}}</td><td>{{d.name}}</td>
  </tr></tbody>
</table>

我的组件

  public selectCompany(event: any, item: any) {
    this.selectedCompanyList.push(item.id);
    console.log(this.selectedCompanyList+" whee");
    item.highlighted=true;
  }

我的CSS

.table tr.highlighted td {
    background-color:#123456 !important;
    color: white;
  }

Answer 1

将样式中的td应用于tr

.table tr.highlighted {
    background-color:#123456 !important;
    color: white;
  }

请尝试以上！

Answer 2

使用此CSS。去掉。从表，因为它不是类。您使用表格标签并删除td，因为您希望tr突出显示而不是td。

table tr.highlighted {
    background-color:#123456 !important;
    color: white;
  }

Answer 3

由于您正在使用类指令，因此需要使用与指令类相匹配的类

.highlighted {
    background-color:#123456 !important;
    color: white;
  }

使用CSS类突出显示多个表行

3 个答案: