使用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>