代码之家 › 专栏 › 技术社区 › Rilcon42

用CSS类突出显示多个表行

datatables angular css

1

Rilcon42 · 技术社区 · 7 年前

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

3 回复 | 直到 7 年前

1

0

Chellappan à®µ 7 年前

因为您使用的是类指令,所以您需要使用与指令类匹配的类,如下所示

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

2

0

Navdeep Singh 7 年前

删除 td 从样式,因为样式应用于 tr

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

请在上面试试!

3

0

Manish Vadher 7 年前

使用这个css。移除。因为它不是类。您使用table标记并删除td,因为您希望tr突出显示而不是td。

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