[英]Get column value onClick in nested HTML Table [Javascript]
我有一個嵌套的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);
});
}
}
您不需要任何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 ? '–' : '+'}} {{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>
我不確定為什么你的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
函數。
trigger
功能中,使用這兩個參數。 $event
將是一個常規的MouseEvent對象, header
將是一個常規的tr元素。 在此之后,您可以通過行中單擊的單元格索引找到單擊的列標題。 StackOverflow線程中的gsnedders為如何在其父級中查找元素索引提供了解決方案。 您的trigger
功能可能如下所示: trigger($event, header) {
const index = this.getChildNumber($event.target);
alert(header.childNodes[index].textContent.trim());
}
這個StackBlitz項目說明了這種方法。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.