HTML Table-change header 背景颜色为原来的颜色

Question

当我从下拉列表中进行选择时，脚本会运行并更改 table header 中所选数字的背景颜色。

如何在进行新选择后将颜色改回原来的背景颜色？

function doIt() {
  var array = [10, 20, 30, 40, 50];
  var a = document.getElementById("select").value;
  var found = array.findIndex(function (element) {
      return element >= a;
  });
document.getElementById("b").value = found;

document.getElementById('t').rows[0].cells[found].style.backgroundColor="#FF0000";
}

th {
  border: 2px solid #999;
  padding: 0.5rem;
  text-align: left;
  background-color: goldenrod;
}

  <label for="Select">Select Number:</label>
  <select id="select" onchange="doIt()";>
      <option>Select</option>
      <option>10</option>
      <option>20</option>
      <option>30</option>
      <option>40</option>
      <option>50</option>
  </select> 
  <input type="text" id="b">
</p>
<table id="t">
  <tbody>
  <tr>
  <th>10</th>
  <th>20</th>
  <th>30</th>
  <th>40</th>
  <th>50</th>
  </tr>
  </tbody>
  </table>

Answer 1

您应该首先“取消突出显示”其他单元格：

function doIt() {
  var array = [10, 20, 30, 40, 50];
  var a = document.getElementById("select").value;
  var found = array.findIndex(function (element) {
      return element >= a;
  });
  document.getElementById("b").value = found;
  var cells = document.getElementById('t').rows[0].cells;
  for(var i = 0; i < cells.length; i++) {
    cells[i].style.backgroundColor="goldenrod";
  }
  cells[found].style.backgroundColor="#FF0000";
}

th {
  border: 2px solid #999;
  padding: 0.5rem;
  text-align: left;
  background-color: goldenrod;
}

<label for="Select">Select Number:</label>
  <select id="select" onchange="doIt()";>
      <option>Select</option>
      <option>10</option>
      <option>20</option>
      <option>30</option>
      <option>40</option>
      <option>50</option>
  </select> 
  <input type="text" id="b">
</p>
<table id="t">
  <tbody>
  <tr>
  <th>10</th>
  <th>20</th>
  <th>30</th>
  <th>40</th>
  <th>50</th>
  </tr>
  </tbody>
  </table>

而且我建议您不要直接更改样式属性 (background-color)，而是 add/remove class 元素。使用 class，您可以附加任意数量的 CSS-rules。

HTML Table-change header 背景颜色为原来的颜色

HTML Table-change header background color to it's original colour

html

javascript

css