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

时间:2018-08-09 14:56:38

标签: javascript jquery html css

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

3 个答案:

答案 0 :(得分:2)

我建议根据您元素的值更改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>

答案 1 :(得分:1)

您可以使用parentNode属性:

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

答案 2 :(得分:1)

您可以稍微更改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给出的答案将来会更优雅,更易于维护。