I'm trying to toggle the background color of some tr
elements based on the background color they are when clicked. This is simple when not working with a striped table. Essentially, the table starts out like the screenshot below. If I click on a row I want to change it to the green hex color I have in my if statement, and if I click it again I want to change it back to the color it was before initally being clicked.
Right now this will change any row that is clicked to the green color, but when clicked again it changes it to white regardless of what color it was before being clicked the first time:
onClick(message:DataTable, idx:any){
var rowClicked = <HTMLCanvasElement> document.getElementById(message.tDataPoint);
var rowColor = rowClicked.style.backgroundColor;
if (idx%2===0 && rowColor === "#015939"){
rowClicked.style.backgroundColor="white";
rowClicked.style.color="#015939";
} else if (idx%2===1 && rowColor === "#d3d3d3") {
rowClicked.style.backgroundColor="#015939";
rowClicked.style.color="white";
} else if (idx%2===0 && rowColor === "white") {
rowClicked.style.backgroundColor="#015939";
rowClicked.style.color="white";
} else if (idx%2===1 && rowColor === "#015939") {
rowClicked.style.backgroundColor="#d3d3d3";
rowClicked.style.color="#015939";
}
}
HTML to generate table:
<tr *ngFor="let dPoint of theData; let idx=index" (click)="onClick(dPoint, idx)" (row)="received($event)" id="{{dPoint.tDataPoint}}">
<td>{{dPoint.tDataPoint}}</td>
<td>{{dPoint.tICCP}}</td>
<td>{{dPoint.tStartDate}}</td>
<td>{{dPoint.tEndDate}}</td>
</tr>
If there's a way in Typescript to check if the row is even or odd, then I can just write the proper if statement's to change the color based on that.
UPDATE I edited my function