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

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>