单击时更改 td 的颜色答案

【问题标题】：Change color of td on click单击时更改 td 的颜色
【发布时间】：2021-03-16 10:11:15
【问题描述】：

当我在按钮中添加 click() 时如何创建函数验证表格的单元格 (td)，以便更改颜色，例如绿色单元格 -> 绿色浅蓝色单元格 -> 蓝色红色单元格 -> 深红色

&lt;button    class="btn btn-success styled1"  type="button"&gt;   Validate &lt;/button&gt;

【问题讨论】：

这里不是要求人们为您编码的地方。请提供您自己尝试过的东西。

标签： css angular html-table onclick click

【解决方案1】：

这是 suedo 代码，您可以根据需要更改它。这只是为了让您了解如何操作。

<table style="width:100%">
  <tr>
    <td class="LightBlue">Firstname</td>
    <td class="LightGreen">Lastname</td>
  </tr>
  <tr>
    <td class="LightBlue">whatever</td>
    <td class="LightGreen">youfill</td>
  </tr>
</table>
<button class="btn btn-success styled1" onclick="changeColor()"  type="button">Validate</button>

<script> 
            function changeColor() { 
              var greenTD = document.getElementByClassName("LightGreen"); 
              var BlueTD= document.getElementByClassName("LightBlue");
              greenTD.style.background = "green"; 
              BlueTD.style.background = "Blue";   
            } 
</script>

【讨论】：

但我的 td 是这样制作的：
如果您只想使颜色变亮或变暗。它可以通过操纵颜色的十六进制值来完成。 link查看十六进制值加减功能。您可以添加 ffffff 以使颜色变亮并添加 000000 以使颜色变暗。在你的 onClick 函数中实现它。
@Mohamedh btw，你是如何为不同的单元格实现不同的颜色的？
当我单击一个单元格时，会出现一个弹出窗口，我选择一种颜色为绿色红色蓝色等...并且框改变颜色我的颜色是 CSS 类，最初的所有单元格桌子是绿色的
如何让我的按钮识别脚本中的函数更改颜色