點擊更改班級名稱並刪除其他點擊班級 - 角4

有人可以幫我解決這個問題。我有不同列（TD）的表。我想選擇一個單元格並更改其類名。當我點擊其他單元格時，我想恢復先前單元格中的類名並更改新選單元格上的類名。請注意：每個單元格都有不同的類名。所以我必須跟蹤前面的類和選定的元素。這是Angular 4應用程序。我的表：點擊更改班級名稱並刪除其他點擊班級 - 角4

<table class="table package-table stats"> 
      <tbody> 
       <tr *ngIf="deptStatsModel.length>0"> 
        <th (click)="setStatsActByDept($event,dt2,null)" class="st-th">ORG</th> 
        <th (click)="setStatsActByDept($event,dt2,'OD')" class="OverDue">Over Due</th> 
        <th (click)="setStatsActByDept($event,dt2,'NA')" class="NeedAttention">Need Att</th> 
        <th (click)="setStatsActByDept($event,dt2,'IA')" class="InProgress">In Prog</th> 
        <th (click)="setStatsActByDept($event,dt2,'CP')" class="Comp">Complete</th> 
       </tr> 
       <tr *ngFor="let model of deptStatsModel"> 
        <td (click)="setActivitiesData($event,model, 'all','DPT')">{{model.deptName}}</td> 
        <td (click)="setActivitiesData($event,model, 'OD','DPT')">{{model.overDue}}</td> 
        <td (click)="setActivitiesData($event,model, 'NA','DPT')">{{model.needAtt}}</td> 
        <td (click)="setActivitiesData($event,model, 'IP','DPT')">{{model.inProg}}</td> 
        <td (click)="setActivitiesData($event,model, 'CP','DPT')">{{model.complete}}</td> 
       </tr> 
       <tr *ngIf="deptStatsModel.length==0"> 
        <td style="text-align: left" colspan="5">No records found</td> 
       </tr> 
      </tbody> 
     </table>

我發現點擊如下：

setStatsActByDept(event,dt,type) 
    { 

var target = event.target || event.srcElement || 
event.currentTarget; 

this.prevDeptCss=target.cloneNode(); 
target.className="selected"; 

    ......... 
}

我不知道該怎麼做next..help請。

來源

2017-05-06 leo

你在想它在錯誤的道路。該代碼不應該修改DOM。它應該修改組件的狀態。該模板是負責根據組件的狀態將CSS類應用於DOM元素的模板。你的桌子是什麼樣的？它顯示什麼以及如何？發佈您的代碼。 –

請參閱表格代碼。當你點擊一個單元格時，選中它。從中刪除選中並點擊其他單元格 – leo

你在錯誤地思考它。該代碼不應該修改DOM。它應該修改組件的狀態。該模板是負責根據組件的狀態將CSS類應用於DOM元素的模板。

假設您的代碼似乎暗示您要選擇標題單元格。你的代碼應該如下所示。

在您的組件：

public selectedHeader: string;

在你看來：

<th (click)="selectedHeader = 'ORG'" [ngClass]="selectedHeader === 'ORG' ? 'selected' : 'st-th'">ORG</th> 
<th (click)="selectedHeader = 'OverDue'" [ngClass]="selectedHeader === 'OverDue' ? 'selected' : 'OverDue'">Over Due</th> 
...

來源

2017-05-06 12:44:48

聲音合理。感謝您的時間。 – leo

點擊更改班級名稱並刪除其他點擊班級 - 角4

回答

相關問題