html - 没有通过键盘关注表格标签

Question

我无法将注意力集中在我的桌子上，我不确定我应该如何标记它，以便它可以通过键盘访问。

 <table class="table table-bordered">
                <thead>
                    <tr>
                        <th scope="col" class="sortable" width="10%" (click)="onHeaderClick('id')"
                            [ngClass]="{'active': sortBy == 'id', 'ascending': sortOrder == 'asc', 'descending': sortOrder == 'desc'}">
                            Id
                        </th>
                        <th scope="col" class="sortable" width="50%" (click)="onHeaderClick('name')"
                            [ngClass]="{'active': sortBy == 'name', 'ascending': sortOrder == 'asc', 'descending': sortOrder == 'desc'}">
                            Name
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let student of studentList" (click)="selectedStudent(student)">
                        <td>
                            {{student.uId}}
                        </td>
                        <td>
                            <a (click)="profile(student)">{{student.fields.Name}}</a>
                        </td>
                    </tr>
                </tbody>
            </table>

Answer 1

您应该button在表格标题单元格中使用元素，而不是尝试使th元素本身具有交互性。

按钮旨在与之交互并附带所有功能以帮助用户使用它们。