[英]Get column value onClick in nested HTML Table [Javascript]
I have a nested HTML table which expands on click. 我有一个嵌套的HTML表格,可以在点击时展开。 When I click inner row, I would like to get column value.
当我点击内部行时,我想得到列值。 Right now, I am getting the column value on click of outer row.
现在,我点击外行获取列值。 For instance in the below image, when I click coding/testing, I would like to pass an alert as "Place".
例如,在下图中,当我点击编码/测试时,我想将警报作为“地点”传递。 Right now, I get alert as "place" when I click city.
现在,当我点击城市时,我会收到警告作为“地点”。
Component: 零件:
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);
});
}
}
You don't need any DOM manipulation, you can simplify your solution as below: 您不需要任何DOM操作,您可以简化您的解决方案,如下所示:
app.component.ts
app.component.ts
// .......
export class AppComponent {
trigger(columnName: string) {
alert(columnName);
}
// .......
}
app.component.html
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>
I'm not sure why you have this code in your trigger
function. 我不确定为什么你的
trigger
功能中有这个代码。 But, if you need to get the column name when a data cell is clicked, you can use the following approach. 但是,如果在单击数据单元格时需要获取列名称,则可以使用以下方法。
trigger
function call a current event object and your header row element template variable : 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>
So, #header
name is assigned to the first tr
element and then it's passed along with $event
to the trigger
function. 因此,#
#header
名称被分配给第一个tr
元素,然后它与$event
一起传递给trigger
函数。
trigger
function, consume these two parameters. trigger
功能中,使用这两个参数。 $event
will be a regular MouseEvent object and header
will be a regular tr element. $event
将是一个常规的MouseEvent对象, header
将是一个常规的tr元素。 After this, you can find the clicked column header by the clicked cell index in your row. trigger
function may look like: trigger
功能可能如下所示: trigger($event, header) {
const index = this.getChildNumber($event.target);
alert(header.childNodes[index].textContent.trim());
}
This StackBlitz project illustrates this approach. 这个StackBlitz项目说明了这种方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.