使用Bootstrap 4和Angular 6,可以通过以下步骤来实现鼠标单击突出显示表格的选定行:
<table class="table">
<tbody>
<tr *ngFor="let item of items" (click)="highlightRow(item)">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.gender }}</td>
</tr>
</tbody>
</table>
selectedRowIndex: number;
highlightRow(item: any) {
this.selectedRowIndex = item.id;
}
<tr *ngFor="let item of items" [class.selected]="item.id === selectedRowIndex" (click)="highlightRow(item)">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.gender }}</td>
</tr>
tr.selected {
background-color: yellow;
}
通过以上步骤,当用户点击表格的某一行时,该行会突出显示,以便于用户识别选定的行。这种交互方式可以提升用户体验,并且适用于各种需要选择行的场景,如数据展示、列表选择等。
腾讯云提供了一系列与云计算相关的产品,其中包括云服务器、云数据库、云存储等。你可以根据具体需求选择适合的产品进行开发和部署。具体产品介绍和相关链接地址可以参考腾讯云官方文档:腾讯云产品文档。
领取专属 10元无门槛券
手把手带您无忧上云