3

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.the table

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

Drew13
  • 1,301
  • 5
  • 28
  • 50
  • 1
    Why don't you just toggle a class which has a background-color property as !important? – Balázs Nov 16 '16 at 17:04
  • Tried something like http://jsfiddle.net/Q7xEw/2/ already but was having issues making it work for Typescript. I changed `onclick` to `(click)` and `function place(domObj, row, col) { domObj.classList.toggle("red"); }` to `place(domObj, row, col) { domObj.classList.toggle("red"); }` with no luck – Drew13 Nov 16 '16 at 17:44

1 Answers1

3

If you generate it using *ngFor you can use these predefined values Implementing ngClassEven ngClassOdd for angular 2, or you can just pass the index with the click`

<tr *ngFor="...; let idx=index; let even=even" 
    [style.color]="rowClicked == idx ? 'green' : (even ? 'white' : 'grey')"
    (click)="onClick(idx)
onClick(idx) {
  this.rowClicked = idx;
}
Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • I edited my function and included my HTML. I checked `idx` by printing to the console and that is being set correctly. I tried adding `self` as parameter and `#self` to my HTML but that didn't seem to be necessary but still not sure. What this does now is just set every single row to white and nothing changes when clicked – Drew13 Nov 16 '16 at 18:11
  • I didn't fully uderstand what you try to accomplish and made some assumptions. As mentooned in comments above yoz should use bindings like `[style.color]="rowClicked == idx ? 'blue' : 'green'"` – Günter Zöchbauer Nov 16 '16 at 18:43
  • I'm sorry but I'm new to Angular2 and this syntax so I'm not sure what any of that really means and how to execute it properly – Drew13 Nov 16 '16 at 19:29
  • 1
    https://angular.io/docs/ts/latest/guide/template-syntax.html. When you add `` will style the row where `idx matches the value of the `rowClicked` property in your components class with `color: blue;`, other rows `color: greed;`. Prefer bindings in the view instead of imperatively manipulating the DOM in Angular2. – Günter Zöchbauer Nov 16 '16 at 19:31
  • So how am I binding `rowClicked` in the HTML to what I actually click? Because I get the information (row index and data) via the `onClick` function. I don't have any sort of of `rowClicked` property in my component. – Drew13 Nov 16 '16 at 19:47
  • Just assign the `idx` you pass to `onClick()` to any property on your component, and use this property instead of `rowClicked` in `` – Günter Zöchbauer Nov 16 '16 at 19:49
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/128291/discussion-between-drew13-and-gunter-zochbauer). – Drew13 Nov 16 '16 at 19:53