在嵌套的 HTML 表中获取列值 onClick [Javascript]答案

【问题标题】：Get column value onClick in nested HTML Table [Javascript]在嵌套的 HTML 表中获取列值 onClick [Javascript]
【发布时间】：2019-10-14 10:53:38
【问题描述】：

我有一个嵌套的 HTML 表格，点击时会展开。当我单击内行时，我想获取列值。现在，我在点击外行时获得列值。例如在下图中，当我单击编码/测试时，我想将警报作为“地点”传递。现在，当我点击城市时，我会收到“地点”的警报。

组件：

 trigger(){
  var table: any = document.getElementById("table");
  var rows = table.rows;
  for (var i = 0; i < rows.length; i++) {
  rows[i].onclick = (function (e) {
    var j = 0;
    var td = e.target;
    while( (td = td.previousElementSibling) != null ) 
        j++;
    alert(rows[0].cells[j].innerHTML);
 });
 }
 }

Demo

【问题讨论】：

为什么要在trigger方法中设置rows[i].onclick事件处理函数？

标签： javascript html angular typescript html-table

【解决方案1】：

您不需要任何 DOM 操作，您可以简化您的解决方案，如下所示：

app.component.ts

// .......
export class AppComponent {
  trigger(columnName: string) {
    alert(columnName);
  }
// .......
}

app.component.html

<table class="table table-hover table-bordered table-responsive-xl" id="table">
    <tr>
        <td> Name </td>
        <td> Place </td>
        <td> Phone </td>
    </tr>

    <tbody>

        <ng-container *ngFor="let data of data1">
            <tr (click)="data.expanded = !data.expanded">
                <td (click)="trigger('Name outer')"> {{ data.expanded ? '&ndash;' : '+'}} {{data.name}} </td>
                <td (click)="trigger('Place outer')"> {{data.place}} </td>
                <td (click)="trigger('Phone outer')"> {{data.phone}} </td>
                <td (click)="trigger('Hobbies Outer')"> {{data.hobbies}} </td>
                <td (click)="trigger('Profession outer')"> {{data.profession}} </td>
            </tr>

            <ng-container *ngIf="data.expanded">
                <tr *ngFor="let data of findDetails(data)">
                    <td style="padding-left: 12px" (click)="trigger('Name inner')"> {{data.datades.name}} </td>
                    <td (click)="trigger('Hobbies inner')"> {{data.datades.hobbies}} </td>
                    <td (click)="trigger('Profession inner')"> {{data.datades.profession}} </td>
                </tr>
            </ng-container>
        </ng-container>
    </tbody>
</table>

【讨论】：

我有很多表格行。我不想为每个 td 添加点击功能，因此寻找不同的方法。

【解决方案2】：

我不确定为什么您的 trigger 函数中有此代码。但是，如果您需要在单击数据单元格时获取列名，则可以使用以下方法。

注入你的trigger函数调用一个当前的event对象和你的标题行元素template variable：

<table class="table table-hover table-bordered table-responsive-xl" id="table">
    <tr #header>
    </tr>
    <tbody>
        <ng-container *ngFor="let data of data1">
            <ng-container *ngIf="data.expanded">
                <tr *ngFor="let data of findDetails(data)" (click)="trigger($event, header)">
                </tr>
            </ng-container>
        </ng-container>
    </tbody>
</table>

因此，#header 名称被分配给第一个 tr 元素，然后它与 $event 一起传递给 trigger 函数。

在您的trigger 函数中，使用这两个参数。 $event 将是一个常规的 MouseEvent 对象，header 将是一个常规的 tr 元素。在此之后，您可以通过单击的行中的单元格索引找到单击的列标题。 StackOverflow thread 中的 gsnedders 提供了如何在其父元素中查找元素索引的解决方案。您的 trigger 函数可能如下所示：

trigger($event, header) {
  const index = this.getChildNumber($event.target);
  alert(header.childNodes[index].textContent.trim());
}

StackBlitz project 说明了这种方法。

【讨论】：