javascript - 使用 getElementsByTagName 选择标签

Question

我正在使用 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>

如何使选择在每个规则上执行而不影响其他选择规则？

Answer 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>