Получить значение столбца onClick во вложенной таблице HTML [Javascript]

Question

У меня есть вложенная 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);
 });
 }
 }

Демо

Answer 1

Я не уверен, почему у вас есть этот код в вашей функции trigger. Но если вам нужно получить имя столбца при нажатии на ячейку данных, вы можете использовать следующий подход.

1. Внедрите в ваш trigger вызов функции текущее событие объект и ваш элемент строки заголовка переменная шаблона :

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

2. В вашей функции trigger используйте эти два параметра. $event будет обычным MouseEvent объектом, а header будет обычным tr элементом. После этого вы можете найти заголовок столбца, по которому щелкнули, по индексу ячейки, по которому щелкнули, в вашей строке. gsnedders в потоке StackOverflow предоставил решение о том, как найти индекс элемента внутри его родителя. Ваша trigger функция может выглядеть следующим образом:

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

Этот проект StackBlitz иллюстрирует этот подход.

Answer 2

Вам не нужно никаких манипуляций с 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>