Html 检查tr是偶数行还是奇数行，以切换条带表格中的背景色

我正在尝试根据单击时的背景色切换某些

tr

元素的背景色。这在不使用条带化表时很简单。从本质上讲，表格开始时如下图所示。如果我单击一行，我想将它更改为If语句中的绿色十六进制颜色，如果我再次单击它，我想将它更改回最初被单击之前的颜色

现在，这会将单击的任何行更改为绿色，但再次单击时，无论第一次单击之前是什么颜色，都会将其更改为白色：

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";
 }
}

onClick（消息：DataTable，idx:any）{
var rowClicked=document.getElementById（message.tDataPoint）；
var rowColor=rowcalicked.style.backgroundColor；
如果（idx%2==0&&rowColor===“#015939”）{
rowClicked.style.backgroundColor=“白色”；
rowClicked.style.color=“#015939”；
}else if（idx%2==1&&rowColor===“#d3”）{
rowClicked.style.backgroundColor=“#015939”；
row.style.color=“白色”；
}否则如果（idx%2==0&&rowColor==“白色”）{
rowClicked.style.backgroundColor=“#015939”；
row.style.color=“白色”；
}否则如果（idx%2==1&&rowColor===“#015939”）{
rowClicked.style.backgroundColor=“#d3”；
rowClicked.style.color=“#015939”；
}
}

要生成表的HTML：

<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>

{{dPoint.tDataPoint}
{{dPoint.tICCP}
{{dPoint.tStartDate}
{{dPoint.tEndDate}

如果在Typescript中有一种方法可以检查行是偶数还是奇数，那么我就可以编写适当的If语句来根据它更改颜色

---

更新我编辑了我的函数

如果您使用

*ngFor

生成函数，您可以使用这些预定义值，也可以通过单击传递索引`

<tr *ngFor="...; let idx=index; let even=even" 
    [style.color]="rowClicked == idx ? 'green' : (even ? 'white' : 'grey')"
    (click)="onClick(idx)

---

为什么不切换一个具有背景色属性的类呢！重要信息？已尝试类似的操作，但在使其适用于Typescript时遇到问题。我将

onclick

更改为

（单击）

和

函数位置（domObj，row，col）{domObj.classList.toggle（“red”）；}

更改为

位置（domObj，row，col）{domObj.classList.toggle（“red”）}

，没有luckI编辑我的函数并包含我的HTML。我通过打印到控制台检查了

idx

，设置正确。我尝试将

self

添加为参数，并将

#self

添加到我的HTML中，但这似乎没有必要，但仍然不确定。现在这样做只是将每一行设置为白色，当clickedI没有完全理解您试图实现的目标并做出一些假设时，不会发生任何变化。正如上面评论中提到的那样，yoz应该使用绑定，比如

[style.color]=“rowClicked==idx？'blue'：“green'”

，很抱歉，我对Angular2和这种语法不熟悉，所以我不确定这到底意味着什么以及如何正确执行它。添加

时，将使用

颜色：蓝色设置
idx与components类中的
rowClicked`属性值匹配的行的样式，其他行<代码>颜色：贪婪。更喜欢视图中的绑定，而不是在Angular2中强制操作DOM。那么如何将HTML中的
rowClicked
绑定到实际单击的内容呢？因为我通过
onClick
函数获取信息（行索引和数据）。我的组件中没有任何类型的
rowClicked
属性。
onClick(idx) {
  this.rowClicked = idx;
}