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