Question

我正在使用简单的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>

使用此表：

<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重复几次。

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

Answer 1

一些改进：

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

Answer 2

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 3

使用colCell()传递事件对象。然后使用window.getComputedStyle获得当前的背景色。这将在rgb中。将此rgb转换为hex，然后使用element.style.property，其中element是事件起源的目标，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>

我已经使用code来回rgb进行十六进制转换

Javascript，在单个td标签中循环运行3个类

3 个答案: