Angular table 选择并突出显示 table 的所有列和行

Question

我正在尝试突出显示 table 的一行和一列。我想收集数组中突出显示的行和列。以下是我正在尝试做的更改

<table class="sjs-table">
  <tbody>
    <tr *ngFor="let row of test">
      <td *ngFor="let val of row">
        {{val}}
      </td>
    </tr>
  </tbody>
</table>

sheet-component.ts

export class SheetJSComponent {
 
  test:[]= [
   
    [
        "Year",
        "Month",
        "Facebook",
        "Reddit",
        "LinkedIn",
        "Instagram"
    ],
    [
        2019,
        1,
        "50",
        "20",
        "25",
        "20"
    ],
    [
        2019,
        2,
        "80",
        "20",
        "25",
        "20"
    ],
    [
        2019,
        3,
        "120",
        "20",
        "25",
        "20"
    ],
    [
        2019,
        4,
        "75",
        "20",
        "25",
        "20"
    ],
    [
        2019,
        5,
        "60",
        "20",
        "25",
        "20"
    ],
    [
        2019,
        6,
        "80",
        "20",
        "25",
        "20"
    ],
    [
        2019,
        7,
        "95",
        "20",
        "25",
        "20"
    ],
    [
        2019,
        8,
        "55",
        "20",
        "25",
        "20"
    ],
    [
        2019,
        9,
        "45",
        "20",
        "25",
        "20"
    ],
    [
        2019,
        10,
        "80",
        "20",
        "25",
        "20"
    ],
    [
        2019,
        11,
        "90",
        "20",
        "25",
        "20"
    ],
    [
        2019,
        12,
        "110",
        "20",
        "25",
        "20"
    ],
    [],
    [
        "This is system generated excel sheet."
    ]
];

 
 
}

我想在用户悬停或单击下图中共享的特定行或列时突出显示列和行。由于我对 css 的理解非常有限，任何帮助都会非常有帮助。

预期突出显示的列：

Stackblitz 详细信息https://stackblitz.com/edit/angular-excel-upload-3jfrkz?file=src%2Fapp%2Fsheet.component.html

Answer 1

试试这个：

html 文件:

<table class="sjs-table">
 <tbody>
  <tr *ngFor="let row of test">
  <td *ngFor="let val of row; let i = index" [class.highlight]="i === 4">
    {{ val }}
  </td>
  </tr>
 </tbody>
</table>

css 文件:

.highlight {
  background: yellow;
}

https://stackblitz.com/edit/angular-excel-upload-l9rxbw?file=src/app/sheet.component.css

Answer 2

输出：

示例运行: https://stackblitz.com/edit/angular-excel-upload-jbwzyy?devtoolsheight=33&file=src/app/sheet.component.html

HTML:

<table class="sjs-table">
  <tbody>
    <tr *ngFor="let row of test; let j = index" (click)="getData(j, row)">
      <td
        *ngFor="let val of row; let i = index"
        (click)="getData1(i)"
        [class.highlight]="i === rows"
      >
        {{ val }}
      </td>
    </tr>
  </tbody>
</table>

<hr />

Clicked Column: {{ data }}

对 TypeScript 的编辑：

  getData(data, row) {
    console.log(row);
    this.col = data;
  }

  getData1(val) {
    if (this.col === 0) {
      this.rows = val;
      this.data = this.test[0][val];
      this.total = [];
      for (let i = 1; i < 13; i++) {
        this.total.push(this.test[i][val]);
      }
      this.data = this.test[0][val] + '->' + this.total;
    }
  }

解释：

这里我试图在getData方法中获取列和行的索引以及行的数据。然后与当前行和列的索引匹配来高亮显示。然后你随心所欲地玩耍。

Angular table 选择并突出显示 table 的所有列和行

Angular table selecting and highlighting all the column and row of a table

html

css

html-table

typescript

angular