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

【问题标题】：highlight multiple table rows with CSS class使用 CSS 类突出显示多个表格行
【发布时间】：2018-08-03 04:11:36
【问题描述】：

当用户基于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;
  }

【问题讨论】：

标签： css angular datatables

【解决方案1】：

由于你使用的是类指令，所以你需要使用与指令类匹配的类，像这样

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

【讨论】：

【解决方案2】：

从样式中删除td，因为样式适用于tr

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

请在上面试试！

【讨论】：

【解决方案3】：

使用这个 CSS。消除。从表中，因为它不是类。您使用 table 标记并删除 td 因为您希望 tr 突出显示而不是 td。

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

【讨论】：