Javascript, цикл 3-х классов в одном теге тд

Question

Я использую простой html и инкрустацию js + css для создания простого сайта, который просто отслеживает, работает ли работник на работе или нет (просто нажимая на td с его именем), дело в том, что я никогда не работал с js и последень чтения документации и поиска в stackoverflow и w3schools, я не могу запустить свой код.Моя проблема заключается в том, что всякий раз, когда я пытаюсь нажать на тд, цвет фона не меняется, и когда я получаю решение, цвет фона всей таблицы меняется, но я хочу по одному тд за раз, кто-нибудь может мне помочь?до сих пор я получил:

<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>

С этой таблицей:

<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>

Рассмотрим повторение td и tr несколько раз.

извините за то, что я такой noob'ishэто мой первый проект с js и html

Answer 1

var cells = document.getElementsByTagName('td');
for(var i =0;i<cells.length;i++){
cells[i].addEventListener('click',function(e){
e.target.classList.toggle('gray');
e.target.classList.toggle('blue');
},false)

}

td {

background-color: #E5F0F8;
color:#000000;
}
.blue{
background-color:#0066bb;
color:#ffffff;
}

<div class="contentSection">
        <table class="awht2">
            <tr>
                <td colspan="5" class="line">LCS</td>
            </tr>
            <tr>
                <td>
                    TestFarbe
                </td>
                </tr>
                </table>
                </div>

Answer 2

Передайте объект события с помощью colCell().Затем используйте window.getComputedStyle, чтобы получить текущий фоновый цвет.Это будет в rgb.Преобразуйте это rgb в hex, а затем используйте element.style.property, где элемент является целью, из которой происходит событие, а свойством является любое свойство css

function colCell(e) {
  let target = event.target;
  // the background color will be in rgb . In that this snippet is 
  // considering only integers and replacing characters and 
  // special characters with empty string. Then using filter to 
  // get only the values which are not empty
  let x = window.getComputedStyle(target).backgroundColor.replace(/[^0-9]/g, ' ').trim().split(' ').filter(e => e !== "");
  let getHex = rgbToHex(+x[0], +x[1], +x[2]).toUpperCase()

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


function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return "#" + componentToHex(229) + componentToHex(240) + componentToHex(248);
}

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

Я использовал код для преобразования rgb в гекс

Answer 3

Некоторые улучшения здесь и там:

<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>

вам не нужно иметь событие окна, вы можете передать this в function.