选中复选框时如何突出显示表格行？角 7答案

【问题标题】：How do I highlight a table row when checkbox is selected? Angular 7选中复选框时如何突出显示表格行？角 7
【发布时间】：2020-05-03 19:29:31
【问题描述】：

所以让我们跳过表头到我的表体。我有一个填充表：

HTML：

<tbody>
   <tr *ngFor="let e of emails; let i = index">
   <td <input type="checkbox" id="email-checkbox" (change)="addToSelectedList($event, e)"></input></td>
   <td id="subject-{{i}}">{{e.sender}}</td>
   <td id="subject-{{i}}">{{e.subject}}</td>
   <td id="subject-{{i}}">{{e.date}}</td>
</tbody>

当用户选中复选框时，我希望表格整行显示一个 CSS 类。然后当用户取消选择时颜色应该恢复正常。只是向用户显示已选择电子邮件的 UI 内容。我目前有一个空的 CSS 和 .ts 文件。

【问题讨论】：

您可以尝试使用[ngClass]="selectedElementClass(e)"，该方法返回应该放在tr 上的类字符串。 angular.io/api/common/NgClass
你真的很亲密。你已经有你的 change event 给你一个 bool 我假设你已经存储到一个公共 var 或其他东西吗？现在只需将它与NgClass 结合使用。但是出于性能原因，请使用基本的{'classname' : booleanVar} 格式而不是设置它的方法。
@ChrisW。所以这是可行的，只是它不是在选定 tr 的特定索引上应用类，而是突出显示表中的所有表行。

标签： javascript html css typescript angular7

【解决方案1】：

您在这里所做的方式涉及更多，因为大概您在 addToSelectedList 事件中有一些逻辑，它将根据选中状态添加/删除电子邮件。最简单的方法是在电子邮件实体 isSelected 上添加一个属性，然后执行以下操作：

<input  ... [checked]="e.isSelected" >

在您的 tr 上添加其他人建议的 ngclass 绑定，如下所示：

<tr [ngClass]="{ 'selectedcssclass' : e.isSelected }"...

您的代码中的其他观察结果没有结束 tr 应该环绕所有 tds。

【讨论】：

另一个观察结果是输入以相同的 id 重复，但这更接近。
非常感谢，是的，您对 addToSelectedList 事件中的逻辑是正确的。

【解决方案2】：

不是 Angular 专家，但您可以使用绑定到复选框的 JS onchange 事件来实现：

$(".box").on("change", function() {
   $(this).parents("tr").toggleClass("highlight");
});

.highlight {
  background-color: #ffff00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Label 1</td>
    <td><input type="checkbox" class="box"/></td>
  </tr>
  <tr>
    <td>Label 2</td>
    <td><input type="checkbox" class="box"/></td>
  </tr>
</table>

【讨论】：