时间戳

首页 > 解决方案 > 如何以角度将类添加到整个表格行

css - 如何以角度将类添加到整个表格行

问题描述

带有 tr 的表。现在我想如果您单击该表格行，背景颜色会发生变化。为什么我想要这个是因为我使用树表来打开这个表行。如果您单击此表格行，我希望整行的背景颜色发生变化。现在，如果我关闭此表格行（再次单击它），我希望背景色恢复正常 

<ng-template pTemplate="header">
            <tr>
                <th>Bedrijsnaam</th>
                <th>Bedrijfstype</th>
                <th>Status</th>
                <th>Bank</th>
            </tr>
        </ng-template>

这就是我所说的tr。我尝试使用ng-class但没有任何运气。有人知道该怎么做吗？

标签： cssangular

解决方案

您可以(click)在[ngClass].tr

前任 ：

   <tr (click)="toggleClass()" [ngClass]="{active: className}">
      ....
    </tr>

在 ts

让类名 = "";

toggleClass(){
 if(this.className === "active"){
    this.className = "" 
}else{
   this.className = "active";
 }
}

在 CSS 中

.active{
   background-color: yellow;
 }

请注意，此实现适用于一个 tr，您可能需要className为每一行附加它。

推荐阅读