我正在使用javascript通过表单中的选择列验证输入文本字段值。
3列采样点,采样类型和低TPC 。我想为设备选项和人员选项的选择列(采样类型)制定规则。 设备选项规则正常,但如果我在第4行选择人员选项,则其他行值(低TPC列)始终执行人员选项规则。
这是我的代码:
<div class="form-group">
<label for="location" class="col-md-2 control-label" style="text-align:left;">location</label>
<div class="col-sm-3">
<select name="location" id="location" class="form-control" onselect="setColor()">
<option value=""></option>
<option value="CMP">CMP</option>
<option value="DRP">DRP</option>
</select>
</div>
</div>
[...]
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
[...]
<td>
<input type="text" name="sample_point[]" id="sample_point" size="17" value=""/></td>
<td>
<select name ="sampling_type[]" id="sampling_type">
<option value=""></option>
<option value="Equipment">Equipment</option>
<option value="Personnel">Personnel</option>
<option value="Environment">Environment</option>
</select>
</td>
<td>
<input type="text" name="low_tpc[]" id="low_tpc" onkeyup="setColor()" size="5" value=""/></td>
[...]
<script type="text/javascript">
function setColor() {
var dropdown = document.getElementById('location').value;
switch (dropdown) {
case 'DRP':
var obj = document.getElementsByTagName('input');
for(var i=0; i<obj.length; i++) {
if (obj[i].name == "sample_point[]") {
var sp = obj[i].value;
}
if (obj[i].name == "low_tpc[]") {
var low = obj[i].value;
var sels = document.getElementsByTagName("select");
for(var j=0; j<sels.length;j++) {
var sel = sels[j];
var type = sel.options[sel.selectedIndex].value;
switch (type) {
case 'Equipment':
if(sp.match(/black/i)) {
if(low > 5000) {
obj[i].style.backgroundColor = "#fd6969";
} else {
obj[i].style.backgroundColor = "";
}
} else if(sp.match(/red/i) || sp.match(/blue/i)) {
obj[i].style.backgroundColor = "";
} else {
if(low > 3200) {
obj[i].style.backgroundColor = "#fd6969";
} else {
obj[i].style.backgroundColor = "";
}
}
break;
case 'Personnel':
if(sp.match(/black/i)) {
if(low > 50) {
obj[i].style.backgroundColor = "#fd6969";
} else {
obj[i].style.backgroundColor = "";
}
} else {
obj[i].style.backgroundColor = "";
}
break;
default:
break;
}
}
}
}
break;
default:
break;
}
}
setColor();
</script>
如何在不影响其他选择规则的情况下对每个规则执行选择?
答案 0 :(得分:1)
您的代码循环遍历所有input
元素,然后对于每个input
,它循环遍历所有select
标记。这不仅效率低下,而且您也无法确定是否针对具有相同行的元素。
我建议重新编写您的函数,以便循环遍历所有行,然后专门针对该行中的控件。这是一个例子:
function setColor() {
var dropdown = document.getElementById('location').value;
switch (dropdown) {
case 'DRP':
var rows = document.getElementsByClassName("row");
//loop through all the rows
[].forEach.call(rows, function(row) {
//get inputs in the current row
var sp = row.querySelector('[name="sample_point[]"]').value;
var type = row.querySelector('[name="sampling_type[]"]').value;
var obj = row.querySelector('[name="low_tpc[]"]');
var low = obj.value;
switch (type) {
case 'Equipment':
if(sp.match(/black/i)) {
if(low > 5000) {
obj.style.backgroundColor = "#fd6969";
} else {
obj.style.backgroundColor = "";
}
} else if(sp.match(/red/i) || sp.match(/blue/i)) {
obj.style.backgroundColor = "";
} else {
if(low > 3200) {
obj.style.backgroundColor = "#fd6969";
} else {
obj.style.backgroundColor = "";
}
}
break;
case 'Personnel':
if(sp.match(/black/i)) {
if(low > 50) {
obj.style.backgroundColor = "#fd6969";
} else {
obj.style.backgroundColor = "";
}
} else {
obj.style.backgroundColor = "";
}
break;
}
});
}
}
function addRow() {
var table = document.getElementById("table");
var newRow = table.querySelector(".row").cloneNode(true);
table.appendChild(newRow);
setColor();
}
setColor();
<div class="form-group">
<label for="location" class="col-md-2 control-label" style="text-align:left;">location</label>
<div class="col-sm-3">
<select name="location" id="location" class="form-control" onselect="setColor()">
<option value=""></option>
<option value="CMP">CMP</option>
<option value="DRP" selected>DRP</option>
</select>
</div>
</div>
<input type="button" value="Add Row" onclick="addRow()" />
<div id="table">
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<td>
<input type="text" name="sample_point[]" size="17" value="black"/>
</td>
<td>
<select name ="sampling_type[]" onchange="setColor()">
<option value=""></option>
<option value="Equipment" selected>Equipment</option>
<option value="Personnel">Personnel</option>
<option value="Environment">Environment</option>
</select>
</td>
<td>
<input type="text" name="low_tpc[]" onkeyup="setColor()" size="5" value="2500"/>
</td>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<td>
<input type="text" name="sample_point[]" size="17" value="red"/>
</td>
<td>
<select name ="sampling_type[]" onchange="setColor()">
<option value=""></option>
<option value="Equipment" selected>Equipment</option>
<option value="Personnel">Personnel</option>
<option value="Environment">Environment</option>
</select>
</td>
<td>
<input type="text" name="low_tpc[]" onkeyup="setColor()" size="5" value="6500"/>
</td>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<td>
<input type="text" name="sample_point[]" size="17" value="yellow"/></td>
<td>
<select name ="sampling_type[]" onchange="setColor()">
<option value=""></option>
<option value="Equipment" selected>Equipment</option>
<option value="Personnel">Personnel</option>
<option value="Environment">Environment</option>
</select>
</td>
<td>
<input type="text" name="low_tpc[]" onkeyup="setColor()" size="5" value="1500"/>
</td>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<td>
<input type="text" name="sample_point[]" size="17" value="black"/></td>
<td>
<select name ="sampling_type[]" onchange="setColor()">
<option value=""></option>
<option value="Equipment">Equipment</option>
<option value="Personnel" selected>Personnel</option>
<option value="Environment">Environment</option>
</select>
</td>
<td>
<input type="text" name="low_tpc[]" onkeyup="setColor()" size="5" value="55"/>
</td>
</div>
</div>
</div>
</div>