Javascript，循环使用单个td标记中的3个类

Posted 2021-03-27

我使用简单的html和镶嵌js + css来创建一个简单的网站，只跟踪一个工人是否在工作（通过简单地点击一个带有他们名字的td），事情是我从未使用过js和一天之后阅读文档并查找stackoverflow和w3schools，我无法运行我的代码。我的问题是每当我尝试点击背景颜色没有改变时，当我得到一个解决方案时，整个表背景颜色改变了，但我想一次一个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重复几次。

很抱歉这是noob'ish这是我的第一个项目与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>

你不需要有窗口事件，你可以将this传递给function。

另一答案

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>

另一答案

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

以上是关于Javascript，循环使用单个td标记中的3个类的主要内容，如果未能解决你的问题，请参考以下文章

我如何使用javascript循环遍历td中的表[关闭]

围绕 3 个连续 <td> 的单个旋转虚线边框

如何将 Oracle SQLPlus 脚本标记为 JavaScript 中的单个语句

文本框的 Javascript 值转换为其他 html 标记 (td) onclick

这样一个循环自栏目标签，如何实现3个td自动换行呢？求救！！

通过循环内的条件更改附加的 td