选择单元格时如何获取表头的值?

时间:2018-08-13 12:58:33

标签: html css angular typescript

我正在处理预订房间的应用程序,并且使用Angular2。我想在表中选择单元格并获取垂直和水平标题的值,例如“ Room 1”和“ 9:00”。我正在从服务器获取表头的数据。这是我的html代码:

<div class="table">
<table class="schedule-table" *ngIf="titles && titles.length && intervals && intervals.length">
        <tr>
            <th class="vertical-header-cell"></th>
            <th class="horizontal-header-cell" *ngFor="let title of titles">{{ title }}</th>
        </tr>
        <tr *ngFor="let interval of intervals">
            <th class="vertical-header-cell">{{ interval }}</th>
            <th class="body-cell" *ngFor="let title of titles"></th>
        </tr>
</table>

我的CSS:

table {
width: 100%;
margin-top: 100px;
border-collapse: collapse;
}   

th {    
height: 60px;   
}

table, th, td {
border: 1px solid black;
}

.body-cell:hover{
background-color: green;
}

.vertical-header-cell {
width: 100px;
}    

My table

1 个答案:

答案 0 :(得分:1)

使用click函数

<th class="horizontal-header-cell" *ngFor="let title of titles" (click)="clickHeader(title,intervals)" >{{ title }}</th>

clickHeader(title: any, intervals: any){
   console.log(title + intervals)
}