Заполнить ячейки таблицы, но сначала очистить фоновый цвет?

Question

У меня проблема, и я не могу решить ее в своем коде Javascript / CSS.

Я хочу заполнить фоновый цвет определенных ячеек таблицы при нажатии кнопки и другой кнопке заполнения другие ячейки с другим цветом, НО "удалить" цвет с первой кнопки, нажмите сначала.

Если я удаляю "fill_cellstransparent ()" из второй кнопки, она работает, но ячейка [1] остается красной, и это то, чего я не хочу.

Кто-нибудь, есть идеи?

РЕДАКТИРОВАТЬ: Я вроде решил, но кто-то знает, как дать идентификаторы ячеек с буквами, fe 1 и по-прежнему работает с function.fill_cellsred ([A])? Кажется, это не работает, если я использую буквы вместо чисел в качестве идентификатора ячейки.

Вот моя первая идея:

function fill_cellsred($cells) {
  $cells.forEach(e => document.getElementById(e).classList.add('fillred'));
}


function fill_cellsgreen($cells) {
  $cells.forEach(e => document.getElementById(e).classList.add('fillgreen'));
}

function fill_cellstransparent($cells) {
  $cells.forEach(e => document.getElementById(e).classList.add('filltransparent'));
}

table td {
    border: 1px solid black;
    padding: 30px;
}

.fillred {
    background-color: red;    
}

.fillgreen {
    background-color: green;    
}

.filltransparent {
    background-color: transparent:;
}

<table>
        <tr>
        <td id="1">1</td>
        <td id="2">2</td>
        <td id="3">3</td>
        <td id="4">4</td>
    </tr>
    <tr>
        <td id="5">5</td>
        <td id="6">6</td>
        <td id="7">7</td>
        <td id="8">8</td>
    </tr>
    <tr>
        <td id="9">9</td>
        <td id="10">10</td>
        <td id="11">12</td>
        <td id="12">12</td>
    </tr>
    <tr>
        <td id="13">13</td>
        <td id="14">14</td>
        <td id="15">15</td>
        <td id="16">16</td>
    </tr>
</table>

<button onclick="fill_cellsred([1, 2, 3])">ROT</button>

<button onclick="fill_cellstransparent(); fill_cellsgreen([2, 3, 5])">GRÜN</button>

Answer 1

Вместо того, чтобы сделать элемент прозрачным, лучший способ - сбросить элемент, то есть вы можете удалить существующий класс.

Вот обновленный код.

function fill_cellsred($cells) {
 fill_cellstransparent()
  $cells.forEach(e => document.getElementById(e).classList.add('fillred'));
}


function fill_cellsgreen($cells) {
fill_cellstransparent() 
  $cells.forEach(e => document.getElementById(e).classList.add('fillgreen'));
}

function fill_cellstransparent() {
document.querySelectorAll("table td").forEach(item=>item.classList=[])
}

table td {
    border: 1px solid black;
    padding: 30px;
}

.fillred {
    background-color: red;    
}

.fillgreen {
    background-color: green;    
}

<table>
        <tr>
        <td id="1">1</td>
        <td id="2">2</td>
        <td id="3">3</td>
        <td id="4">4</td>
    </tr>
    <tr>
        <td id="5">5</td>
        <td id="6">6</td>
        <td id="7">7</td>
        <td id="8">8</td>
    </tr>
    <tr>
        <td id="9">9</td>
        <td id="10">10</td>
        <td id="11">12</td>
        <td id="12">12</td>
    </tr>
    <tr>
        <td id="13">13</td>
        <td id="14">14</td>
        <td id="15">15</td>
        <td id="16">16</td>
    </tr>
</table>

<button onclick="fill_cellsred([1, 2, 3])">ROT</button>

<button onclick="fill_cellsgreen([2, 3, 5])">GRÜN</button>

Answer 2

Я считаю, что это рабочий код

function fill_cellsred(nums) {
  $cells = get_cells(nums);
  $cells.map(e => e.classList.add('fillred'));
}


function fill_cellsgreen(nums) {
  $cells = get_cells(nums);
  $cells.map(e => e.classList.add('fillgreen'));
}

function fill_cellstransparent() {
  $cells = get_cells();
  $cells.map(e => e.classList.add('filltransparent'));
}

function get_cells(nums = []) {
  let $cells = document.querySelectorAll('table td');
  
  // $cells_final will be array in the end
  // so let's make $cells also an array
  // so there will be less mistakes in future
  $cells = Array.from($cells);
  let $cells_final = [];
  
  // filter cells by num
  if(nums.length) {
    for(let i = 0; i < nums.length; i++) {
      $cell = $cells[nums[i] - 1];

      if($cell) $cells_final.push($cell);
    }
  }
  else {
    $cells_final = $cells;
  }
  
  return $cells_final;
}

table td {
    border: 1px solid black;
    padding: 30px;
}

.fillred {
    background-color: red;    
}

.fillgreen {
    background-color: green;    
}

.filltransparent {
    background-color: transparent:;
}

<table>
        <tr>
        <td id="1">1</td>
        <td id="2">2</td>
        <td id="3">3</td>
        <td id="4">4</td>
    </tr>
    <tr>
        <td id="5">5</td>
        <td id="6">6</td>
        <td id="7">7</td>
        <td id="8">8</td>
    </tr>
    <tr>
        <td id="9">9</td>
        <td id="10">10</td>
        <td id="11">12</td>
        <td id="12">12</td>
    </tr>
    <tr>
        <td id="13">13</td>
        <td id="14">14</td>
        <td id="15">15</td>
        <td id="16">16</td>
    </tr>
</table>

<button onclick="fill_cellsred([1, 2, 3])">ROT</button>

<button onclick="fill_cellstransparent(); fill_cellsgreen([2, 3, 5])">GRÜN</button>

На самом деле я думаю, что вы должны использовать e.style['background-color'] = 'green' вместо классов или удалять классы каждый раз e => {e.classList.remove('fillgreen'); e.classList.remove('filltransparent'); e.classList.add('fillred')};