javascript - Javascript - 仅在单击时突出显示列名

Question

我有一个 html 表（列名：T1、T2、T3）。我只想在用户单击时突出显示列名（T1），其余列名没有突出显示（T2，T3）。然后，当用户单击另一个列名（T2）时，它会突出显示，但我希望重置所有其他列名而不突出显示（T1，T3）。

我怎样才能只使用 javascript、css 和/或 html 来做到这一点？请不要包含 JQuery，我不能使用它。

标签： javascripthtmlcss

Answer 1

var elems = document.querySelectorAll('td');

var fnClick = function(){
	var ie = document.querySelectorAll('td');
  for(var x = 0; x < ie.length; x++){
    elems[x].classList.remove("red");
  }
  this.classList.add("red");
}

for (var i = 0; i < elems.length; i++){
     elems[i].addEventListener("click", fnClick);
}

.red { background-color: red; }

<table>
  <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
</table>