html - 在 Angular8 中单击按钮隐藏和显示 html 表中的多列
问题描述
我必须在 html 表中切换显示和隐藏多个列。目前我可以显示和隐藏 column2。但是我想通过单击隐藏和显示多列,例如第 3 列、第 4 列和第 6 列,并在显示和隐藏之间切换按钮名称。还是有什么简单的方法可以在角度 8 中处理这个问题?
下面是我的表
html
<button onclick='document.getElementById("foo").classList.toggle("hide2")'>Show/hide</button>
<table id="foo" class="table table-sm fs-13px mt-2 mb-5">
<tr>
<th class="text-danger fw7 pl-0" colspan="6">
TABLE 1
</th>
</tr>
<tr>
<th class="text-nowrap pr-3 pl-0 sticky-header">Year
</th>
<th class="text-nowrap pr-3 sticky-header">Platform
</th>
<th class="text-nowrap pr-3 sticky-header">Name
</th>
<th class="text-nowrap pr-3 sticky-header">Variants
</th>
<th class="text-nowrap pr-3 sticky-header">Program
</th>
<th class="w-100 sticky-header"></th>
</tr>
<tr *ngFor="let u of apiData.unassigned">
<td class="text-nowrap pr-3 pl-0">
{{ u.year }}
</td>
<td class="text-nowrap text-danger pr-3">
Not Assigned
</td>
<td class="text-nowrap pr-3">
{{ u.modelName }}
</td>
<td class="text-nowrap pr-3">
{{ u.unassignedVariantCount }}
</td>
<td class="text-nowrap pr-3">
{{ u.programCode }}
</td>
<td></td>
</tr>
<tr>
<td colspan="6">
</td>
</tr>
</table>
CSS代码
#foo.hide2 tr > *:nth-child(2) {
display: none;
}
解决方案
在 Angular 中找到了一个使用布尔变量和 scss 类打开和关闭它的解决方案,如下所示:
.html 文件
<button class="mr-2 mb-1" [class.rs-inactive]="!showPlatformDetail" [class.rs-active]="showPlatformDetail" (click)="showPlatformDetail=!showPlatformDetail"> {{showPlatformDetail ? 'Show Detail' : 'Hide Detail'}} </button>
<table id="platforms" class="table table-sm fs-13px mt-2 mb-5" [class.platform-detail]="showPlatformDetail">
<tr>
<th class="text-danger fw7 pl-0" colspan="6">
TABLE 1
</th>
</tr>
<tr>
<th class="text-nowrap pr-3 pl-0 sticky-header">Year
</th>
<th class="text-nowrap pr-3 sticky-header">Platform
</th>
<th class="text-nowrap pr-3 sticky-header">Name
</th>
<th class="text-nowrap pr-3 sticky-header">Variants
</th>
<th class="text-nowrap pr-3 sticky-header">Program
</th>
<th class="w-100 sticky-header"></th>
</tr>
<tr *ngFor="let u of apiData.unassigned">
<td class="text-nowrap pr-3 pl-0">
{{ u.year }}
</td>
<td class="text-nowrap text-danger pr-3">
Not Assigned
</td>
<td class="text-nowrap pr-3">
{{ u.modelName }}
</td>
<td class="text-nowrap pr-3">
{{ u.unassignedVariantCount }}
</td>
<td class="text-nowrap pr-3">
{{ u.programCode }}
</td>
<td></td>
</tr>
<tr>
<td colspan="6">
</td>
</tr>
</table>
.scss 文件
.platform-detail > tr > *:nth-child(7),
.platform-detail > tr > *:nth-child(8),
.platform-detail > tr > *:nth-child(10),
.platform-detail > tr > *:nth-child(11),
.platform-detail > tr > *:nth-child(13),
.platform-detail > tr > *:nth-child(15) {
display: none;
}
.ts 文件
showPlatformDetail = true;
推荐阅读
- django - 将内联 HTML 代码添加到 Wagtail 富文本编辑器
- c# - 如何通过 WIFI 将数据从 ESP32 发送到 C# VIsual Studio
- warpscript - warpscript:WEBCALL 成功或失败
- anaconda - 为什么 conda 设置 `auto_activate_base` 会更改 `conda run` 的 $PATH?
- laravel - 如何使用 JSON 在 Laravel 中的 View 中从控制器传递假期日期
- menu - 如何向导航栏添加菜单?
- vhdl - 详细报告抛出类型不匹配错误
- python - SQLAlchemy:使用不同的引擎从现有类创建表
- c# - 以 IEnumerable 形式检索 Json 数据
- powershell - 在此对象上找不到 Powershell 属性“时间戳”