如何获取当前行 HTML 表格单元格元素？答案

【问题标题】：How to get current row HTML Table cell element?如何获取当前行 HTML 表格单元格元素？
【发布时间】：2021-10-02 07:17:31
【问题描述】：

我有一个角材料表。如果我单击一行，我想获取 selected row 的 HTMLTableCellElement 。我尝试使用 viewChild 但问题是我正在获取整个表格 html 元素。预期输出下面是我的代码。请帮助我实现这个场景！ https://stackblitz.com/edit/angular-material-table-data-source-nym2vx?file=app/app.component.html

【问题讨论】：

请在问题中而不是在链接中包含一个最小可复制示例

标签： javascript angular angular-material

【解决方案1】：

在您的示例中，当您单击 a 标签时，您还可以将该标签发送到您的函数：

  <mat-cell *matCellDef="let element" id="{{ element.position }}">
    <a href="javascript:;" (click)="viewhtmlData($event.target)">{{
      element.name
    }}</a>
  </mat-cell>

然后，在您的函数中，您可以获取该标签的父级，即包含它的 mat-cell，如下所示：

  viewhtmlData(aTag: HTMLElement) {
    console.log('Selected Row HtML data', aTag.parentElement);
  }

  <!-- CONSOLE OUTPUT -->
  <mat-cell _ngcontent-c69="" class="mat-cell cdk-column-name mat-column-name" role="gridcell" id="3">
    <a _ngcontent-c69="" href="javascript:;">Lithium</a>
  </mat-cell>

【讨论】：

【解决方案2】：

您可以根据您提供的示例进行两项更改。

更改：1（在 .html 端）通过函数传递事件：viewhtmlData()

  <a href="javascript:;" (click)="viewhtmlData()">{{ element.name }}</a>

到

 <a href="javascript:;" (click)="viewhtmlData(element)">{{ element.name }}</a>

更改 2：（在 .ts 侧）通过函数传递元素

// This function will show entire table contents
  viewhtmlData() {
    console.log('Selected Row HtML data',this.table);
  }

到

// The element data from  .html is passed through the function
  viewhtmlData($event) {
    console.log('Selected Row HtML data',$event);
    this.selectedElement =$event;
    var Row = document.getElementById($event.position)  as HTMLTableCellElement;    
    this.selectedCellHtml = Row;
   
    console.log('Selected Row HtML data',this.selectedCellHtml);
    
  }

如需进一步参考，您可以查看以下示例：https://stackblitz.com/edit/angular-material-table-data-source-gpybg5?file=app%2Fapp.component.ts

【讨论】：

我想要 htmlcontent 就像 HTMLTableCellElement {tagName: "td", attributes: {...}, innerHTML: "1", nodeType: 1...} attributes: Object class: "mat-cell cdk- column-position mat-column-position" id: "1" mat-cell: "" role: "gridcell" _ngcontent-imd-c1: "" proto: Object innerHTML: "1" nodeType: 1 个标签名称：“td”
@Sanjana，请检查确认
编辑了 viewhtmlData(){}