使用getElementsByTagName选择标记

Question

I'm using javascript to validate input text field values by selection column in my form.

3 column Sample Point , Sampling Type and Low TPC . I want to make rules on selection column (Sampling type) for Equipment options and Personnel option . The Equipment option rules work fine, but if i select Personnel option on row 4, then the other rows value (Low TPC column) always executed Personnel option rules.

Here my code:

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

How to make the selections to execute on each rules without affected other selection rules ?

Answer 1

Your code loops through all the input elements, then for each input it is looping through all the select tags. This is not only inefficient, but you also can't be sure that you are targeting elements withing the same row.

I'd suggest re-writing your function so that you are looping through all the rows, and then specifically targeting the controls within that row. Here's an example:

 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>