如何更改表格單元格的顏色

Question

我的站點中有一個表格，我想更改每一行上單個單元格的顏色，就像在圖像中一樣：

到目前為止，這是我在 html 上的代碼

       <table class="table table-hover table-bordered">
        <thead>
          <tr>
            <th style="text-align: center;" colspan="29">DESTINO</th>
          </tr>
          <tr>
            <th *ngFor="let val of table_headers">{{val}}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let val of array">
            <td *ngFor="let item of val">{{item}}</td>
          </tr>
        </tbody>
      </table>

Answer 1

我看到您正在使用 Angular *ngFor 指令。 您可以跟蹤索引並將 class 添加到對角線上的所有單元格。

<tr *ngFor="let val of array; let i = index">
    <td *ngFor="let item of val; let j = index" [class.coloured]="i === j">{{item}}</td>
</tr>

.coloured {
    background-color: green;
}

Answer 2

這個代碼示例會給你一個想法。

function filterOddNumbers(integers){
      let oddOne = integers.filter((item) => Math.abs(item) % 2 === 1);
      let odderOne = integers.filter((item) => Math.abs(item) % 2 === 0);
    if (oddOne.length > 1) {
      return odderOne[0];
    }
    else {
      return oddOne[0];
    }
    }

  filterOddNumbers([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);