Question

我不熟悉JavaScript，但是我正在编写的软件会在html文件中生成一张大表，因此我可以尝试使用JavaScript进行某些样式和行为。 html文件包含一个很大的数据表。表格的其中一行包含一个下拉框，其中的三个框具有相关的颜色：通行证：绿色| 失败：红色| 无：蓝色作为用户的视觉辅助工具，我尝试设置包含的背景色以映射到所选项目的颜色。程序启动时，某些下拉框将设置为通过或失败（或不设置），因此JavaScript必须将td背景色映射设置为选择框：首次在浏览器中呈现文档的时间。选择框更改后的值到目前为止，香港专业教育学院达到：使用JavaScript： setColor = function（）{ var e = document.getElementById（“ select”）; e.style.backgroundColor = e.options [e.selectedIndex] .value; } 道歉，如果这很简单，但我仍在尽力围绕JavaScript。编辑现在已解决（以各种方式），请参阅下面的解决方案！

Answer 1

我建议根据您元素的值更改classList中的parentNode。

要侦听<select>中的更改，向每个侦听器添加事件侦听器可能会更干净一些。选择更改后，只需调用一个获取父项，获取值并根据元素的值更改父类的函数。

var data = document.querySelectorAll('#data-table tr td select');

data.forEach(function(item) {
  setColor(item);

  item.addEventListener('change', function() {
    setColor(this);
  });
});

function setColor(element) {
  var container = element.parentElement;
  container.classList.remove('none', 'pass', 'fail');

  var value = element.options[element.selectedIndex].value;
  container.classList.add(value);
}

table tr td {
  border: 1px solid black;
  padding: 5px;
}

table tr td.none {
  background-color: blue;
}

table tr td.pass {
  background-color: green;
}

table tr td.fail {
  background-color: red;
}

<table id="data-table">
  <tr>
    <td>
      <select>
        <option value="none" default selected>None</option>
        <option value="pass">Pass</option>
        <option value="fail">Fail</option>
      </select>
    </td>
    <td>
      <select>
        <option value="none" default>None</option>
        <option value="pass" selected>Pass</option>
        <option value="fail">Fail</option>
      </select>
    </td>
    <td>
      <select>
        <option value="none" default>None</option>
        <option value="pass">Pass</option>
        <option value="fail" selected>Fail</option>
      </select>
    </td>
  </tr>
</table>

Answer 2

您可以使用parentNode属性：

setColor = function() {
         var e = document.getElementById("select");
         e.parentNode.style.backgroundColor = e.options[e.selectedIndex].value;
      }

Answer 3

您可以稍微更改HTML使其变得动态：

<td align="center" id="dropdownTableData">
    <select id = "select" onchange="setColor(this)">
        <option value="green">pass</option>
        <option value="red">fail</option>
        <option value="blue" selected="selected">none</option>
    </select>
</td>

JS：

setColor = function(element) {
    element.parentNode.style.backgroundColor = element.options[element.selectedIndex].value;
}

在开始时调用：

var selectElements = document.getElementById('tableID').getElementsByTagName('select')
for (var i = 0; i < selectElements.length; i++) {
    setColor(selectElements[i]);
}

仅需注意一点：

尽管我的回答解决了问题中提到的问题，但我相信Chase Ingebritson给出的答案将来会更优雅，更易于维护。

JavaScript：根据选择的<option>设置包含<select>的表的背景颜色

3 个答案: