javascript - 如何更改指定的 类？

Question

function change() {
  var tds = document.getElementsByTagName("td");
  var tds2 = tds.className;
  console.log(tds);
  for (var i = 0; i < tds.length; i++) {
    if (tds[i].className === "marked") {
      tds[i].className = "UNmarked";
    } else {
      tds[i].className = "marked";
    }
  }
}

function generTab(rows, cols) {
  var html = "<table id='tb01'>";
  for (var i = 1; i <= rows; i++) {
    html += "<tr>"
    for (var j = 1; j <= cols; j++) {
      html += "<td class='marked' onclick='change()'>" + "</td>";
    }

    html += "</tr>"
  }
  return html + "</table>";
}

td.marked {
  height: 50px;
  width: 50px;
  border: solid thin black;
  cursor: pointer;
  background-color: white;
}

td.UNmarked {
  height: 50px;
  width: 50px;
  border: solid thin black;
  cursor: pointer;
  background-color: purple;
}

<div class="line">
  Number of rows:
  <input type="text" id="rows" />


</div>
<div class="line">
  Number of cols:
  <input type="text" id="cols" />
  <span class="error"></span>
</div>
<input type="button" value="Generuj" id="gener" />
</div>
<div id="scene"></div>

我正在自己生成表，我想更改指定的类 <td>通过点击它。问题是当我点击任何一个 <td>它正在改变所有人的类，但我想改变那个 <td>我点击的类。

Answer 1

也许你可以用一个类做一些类似下面的事情:

var tds = document.querySelectorAll("td");
tds.forEach(function(td){
  td.addEventListener('click', function(){
    this.classList.toggle('marked')
  });
});

td {
   border: 1px solid lightgray;
   padding: 10px;
   font-size: 20px;
}
.marked{
  background-color: #4CAF50;
  color: white;
}

<table>
  <tr>
    <td>1</td><td>2</td><td>3</td>
  </tr>
  <tr>
    <td>4</td><td>5</td><td>6</td>
  </tr>
</table>