Javascript，在单个td标记中循环3个类

我使用简单的html和inlay js+css创建了一个简单的网站，只跟踪员工是否在工作（只需点击一个有他们名字的td），问题是我从来没有使用过js，在阅读文档和查找stackoverflow和w3schools一天后，我无法运行代码。 我的问题是，每当我尝试点击td时，背景色不会改变，当我得到解决方案时，整个表格的背景色都会改变，但我希望一次只点击一个td，有人能帮我吗？ 到目前为止，我得到了：

<script language=javascript type="text/javascript">
var el
function colCell() {
  if (typeof event !== 'undefined')
    el = event.srcElement;

  elements = document.getElementsByTagName('td');

  if (el.style.backgroundColor == "#E5F0F8")
  {
    el.style.backgroundColor = "#0066bb"
    el.style.color ="#ffffff"
  }
  else if (el.style.backgroundColor == "#0066bb") 
  {
    el.style.backgroundColor = "#ff00ff"
    el.style.color = "#ffffff"
  }
  else
  {
    el.style.backgroundColor = "#E5F0F8"
    el.style.color = "#000000"
  }
}

if (window.addEventListener)
  window.addEventListener('click', function(e) {
    el = e.target
  }, true)
</script>

瓦雷尔
函数colCell（）{
if（事件类型！==‘未定义’）
el=event.src元素；
elements=document.getElementsByTagName（'td'）；
如果（el.style.backgroundColor==“#E5F0F8”）
{
el.style.backgroundColor=“#0066bb”
el.style.color=“#ffffff”
}
else if（el.style.backgroundColor==“#0066bb”）
{
el.style.backgroundColor=“#ff00ff”
el.style.color=“#ffffff”
}
其他的
{
el.style.backgroundColor=“#E5F0F8”
el.style.color=“#000000”
}
}
if（window.addEventListener）
window.addEventListener（'click'，函数（e）{
el=e.target
}，对）

使用此表：

<div class="contentSection">
        <table class="awht2">
            <tr>
                <td colspan="5" class="line">LCS</td>
            </tr>
            <tr>
                <td onclick="colCell()" style="background-color: #E5F0F8;">
                    TestFarbe
                </td>

LCS
TestFarbe

考虑重复几次td和tr

---

很抱歉这么无礼这是我第一个使用js和html的项目

这里和那里的一些改进：

<script language=javascript type="text/javascript">
var el
function colCell(el) {

  elements = document.getElementsByTagName('td');

  if (el.style["background-color"] == "rgb(229, 240, 248)")
  {
    el.style["background-color"] = "#0066bb"
    el.style.color ="#ffffff"
  }
  else if (el.style["background-color"] == "rgb(0, 102, 187)") 
  {
    el.style["background-color"] = "#ff00ff"
    el.style.color = "#ffffff"
  }
  else
  {
    el.style["background-color"] = "#E5F0F8"
    el.style.color = "#000000"
  }
}

/*if (window.addEventListener)
  window.addEventListener('click', function(e) {
    el = e.target
  }, true)*/
</script>
<div class="contentSection">
        <table class="awht2">
            <tr>
                <td colspan="5" class="line">LCS</td>
            </tr>
            <tr>
                <td onclick="colCell(this)" style="background-color: #E5F0F8;">
                    TestFarbe
                </td>
                <td onclick="colCell(this)" style="background-color: #E5F0F8;">
                    TestFarbe2
                </td>
                <td onclick="colCell(this)" style="background-color: #E5F0F8;">
                    TestFarbe3
                </td>
                <td onclick="colCell(this)" style="background-color: #E5F0F8;">
                    TestFarb4
                </td>
                <td onclick="colCell(this)" style="background-color: #E5F0F8;">
                    TestFarbe5
                </td>
            </tr>
        </table>
    </div>

瓦雷尔
函数colCell（el）{
elements=document.getElementsByTagName（'td'）；
如果（el.style[“背景色”]=“rgb（229240248）”）
{
el.样式[“背景色”]=“#0066bb”
el.style.color=“#ffffff”
}
else if（el.style[“背景色”]=“rgb（0，102，187）”）
{
el.样式[“背景色”]=“ff00ff”
el.style.color=“#ffffff”
}
其他的
{
el.样式[“背景色”]=“E5F0F8”
el.style.color=“#000000”
}
}
/*if（window.addEventListener）
window.addEventListener（'click'，函数（e）{
el=e.target
}，对）*/
LCS
TestFarbe
TestFarbe2
TestFarbe3
TestFarb4
TestFarbe5

您不需要有窗口事件，您可以将

此

传递给

函数

var cells=document.getElementsByTagName（'td'）；
对于（var i=0；i使用
colCell（）传递事件对象）
。然后使用
窗口。getComputedStyle
获取当前背景颜色。这将在
rgb
中。将此
rgb
转换为
hex
，然后使用
元素.style.property
，其中元素是事件起源的目标，属性是任何css属性


函数colCell（e）{
让target=event.target；
//背景颜色将以rgb为单位
//只考虑整数并替换字符和
//带有空字符串的特殊字符。然后使用筛选器
//仅获取不为空的值
设x=window.getComputedStyle（target）.backgroundColor.replace（/[^0-9]/g'）.trim（）.split（“”）.filter（e=>e！==“”）；
设getHex=rgbToHex（+x[0]，+x[1]，+x[2]）。toUpperCase（）
如果（getHex==“#E5F0F8”）{
target.style.backgroundColor=“#0066bb”
target.style.color=“#ffffff”
}else if（el.style.backgroundColor==“#0066bb”）{
target.style.backgroundColor=“#ff00ff”
target.style.color=“#ffffff”
}否则{
target.style.backgroundColor=“#E5F0F8”
target.style.color=“#000000”
}
}
函数组件到十六进制（c）{
var hex=c.toString（16）；
返回十六进制长度==1？“0”+十六进制：十六进制；
}
函数rgbToHex（r、g、b）{
返回“#”+组件到十六进制（229）+组件到十六进制（240）+组件到十六进制（248）；
}

LCS
TestFarbe
大家好，欢迎来到SO:）。JavaScript控制台中是否存在错误？（F12，然后是控制台）。此外，您不需要
窗口上的
eventListener
。删除eventListener和函数中的第一个if语句，并将
el=event.srcelment
替换为
el=this
。那应该行的。嘿，谢谢你的热情欢迎。控制台抛出了一个错误：Uncaught TypeError:无法读取HTMLTableCellElement.onclick（AWHT_Testthing.html:56）中未定义的colCell（AWHT_Testthing.html:17）的undefined属性'backgroundColor'，但我猜这是在我根据错误将函数更改为您的注释之前出现的，函数不知道您单击了哪个元素（它不知道
el
）。现在我的更改能用吗？抱歉，它不能用了，你对el=这个等等的更改，我最想循环使用3种颜色，比如蓝色>绿色>橙色，现在在我的代码中，这里的代码片段也最像我想要的，但是，当我复制和调整我的代码时，它根本不想像我想要的那样工作，非常感谢！