Выберите и измените один цвет ячейки таблицы на строку с угловым 6 - PullRequest
Новая
       7

Выберите и измените один цвет ячейки таблицы на строку с угловым 6

0 голосов
/ 08 октября 2018

Я пытаюсь составить таблицу, в которой я смогу выбрать ячейку и изменить ее цвет.Можно выбрать только 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"; }

Вот что получил банкомат.Если вам нужно больше информации, дайте мне знать.Любая помощь будет оценена.

1 Ответ

0 голосов
/ 08 октября 2018 
 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';
  }

Я не знаю много о взаимодействии угловых домов, но, надеюсь, вы сможете найти путь через это

...