时间戳

首页 > 解决方案 > 我想在表格中的单个单元格中单击鼠标时将多个颜色更改为颜色

html - 我想在表格中的单个单元格中单击鼠标时将多个颜色更改为颜色

问题描述

我的目标是循环使用颜色；单击鼠标即可在单个表格单元格中显示白色、绿色、黄色和红色。我正在尝试对各种元素进行简单的在线评估，并将屏幕截图发送给导师。这是我用于两种颜色（白色、绿色）的代码。

var cells = document.querySelectorAll("td");

for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener("click", function() {
    this.className = this.className == "white" ? "green" : "white";
  });
}
.green {
  background: green;
  color: white;
}

.white {
  background: white;
  color: black;
}

#sales-list {
  border: 1px solid black;
}

td {
  padding: 10px;
  border: 1px solid black;
}
<table id="sales-list">
  <tr>
    <td class="white">Row 1 Col 1</td>
    <td class="white">Row 1 Col 2</td>
    <td class="white">Row 1 Col 3</td>
  </tr>
  <tr>
    <td class="white">Row 2 Col 1</td>
    <td class="white">Row 2 Col 2</td>
    <td class="white">Row 2 Col 3</td>
  </tr>
  <tr>
    <td class="white">Row 3 Col 1</td>
    <td class="white">Row 3 Col 2</td>
    <td class="white">Row 3 Col 3</td>
  </tr>
</table>

标签： htmlcss

解决方案

将颜色存储在数组中并在单击时获取类的索引，然后在下一个索引处获取类并将其分配给className.

请记住执行检查以查看颜色是否是数组的最后一项，如果是，请将索引重置回0.

var colors = ['white', 'green', 'yellow', 'red'];
var cells = document.querySelectorAll("td");

for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener("click", function() {
    var i = colors.indexOf(this.className);
    this.className = colors[i == colors.length - 1 ? 0 : i + 1];
  });
}
.green {
  background: green;
  color: white;
}

.white {
  background: white;
  color: black;
}

.red {
  background: red;
}

.yellow {
  background: yellow;
}

#sales-list {
  border: 1px solid black;
}

td {
  padding: 10px;
  border: 1px solid black;
}
<!DOCTYPE html>
<html>

<head>
  <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>

<body>
  <table id="sales-list">
    <tr>
      <td class="white">Row 1 Col 1</td>
      <td class="white">Row 1 Col 2</td>
      <td class="white">Row 1 Col 3</td>

    </tr>
    <tr>
      <td class="white">Row 2 Col 1</td>
      <td class="white">Row 2 Col 2</td>
      <td class="white">Row 2 Col 3</td>

    </tr>
    <tr>
      <td class="white">Row 3 Col 1</td>
      <td class="white">Row 3 Col 2</td>
      <td class="white">Row 3 Col 3</td>

    </tr>

  </table>
</body>

</html>

推荐阅读