填充表格單元格，但先清空背景色？

Question

我有一個問題，我似乎無法在我的 Javascript / CSS 代碼中解決它。

我想在 Buttonclick 上填充某些表格單元格的背景顏色，並用另一個按鈕填充其他單元格的不同顏色，但首先從第一個 buttonclick 中“刪除”顏色。

如果我從第二個按鈕中刪除“fill_cellstransparent（）”，它可以工作，但單元格 [1] 保持紅色，這就是我不想要的。

有人知道嗎？

編輯：我解決了它，但有人知道如何用字母 fe 1 給單元格 ID，並且仍然適用於 function.fill_cellsred([A])？ 如果我使用字母而不是數字作為單元格 ID，它似乎不起作用。

這是我的第一個想法：

 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(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')} e => {e.classList.remove('fillgreen'); e.classList.remove('filltransparent'); e.classList.add('fillred')} e => {e.classList.remove('fillgreen'); e.classList.remove('filltransparent'); e.classList.add('fillred')} ;

Answer 2

最好的方法不是使元素透明，而是重置元素意味着您可以刪除現有的 class。

這是更新的代碼。

 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>