Question

我正在尝试制作一个表格，可以在其中选择一个单元格并更改其颜色。每行只能选择1个单元格。选中后，其颜色应为红色。单击另一个后，其颜色应更改回原来的颜色。我已经尝试了好几天，但没有成功。仅更改整个行或列的颜色，而不更改单个单元格的颜色。能做到吗这是我的模板代码：

 <table id="table2"  class="table table-bordered text-center">
    <thead class="thead-light">
      <th>Criteria</th>
    </thead>
    <tbody>
    <tr *ngFor="let criter of rows;">          
      <td>{{ criter.criteria1 }}</td>
      <td>{{ criter.criteria2 }}</td>
      <td>{{ criter.criteria3 }}</td>
      <td>{{ criter.criteria4 }}</td>
    </tr>    
  <tbody>
  </table>

对于CSS，它只需要此类（我认为）：

.on { background-color: "red"; }

这就是ATM的原因。如果您需要更多信息，请告诉我。任何帮助将不胜感激。

Answer 1

 changeBG(val) { // on tr element
    // val is event.target
    let table = document.querySelector('#table2');
    let selectedCells = table.getElementsByClassName('on');
    if (val.tagName !== 'TD') {
        return;
      }
    if (selectedCells.length) {
      selectedCells[0].className = '';
    }
    val.className = 'on';
  }

我对角度dom互动了解不多，但希望您能找到解决方法

选择并更改角度为6的每行的单个表格单元格颜色

1 个答案: