如何使用具有数组的jquery处理新字段

I have for example 3 fields that user can input a number a,b,c

So field C will check if number entered in field C is < a and > b.

In the form i have a button that create an additional line with another a,b,c; so i don't know how to control same operation like before...

FIDDLE

$(".c").change(function() {

  if ($('.c').val() > $('.a').val() || $('.c').val() < $('.b').val()) {
    $('.c').css("backgroundColor", "#ff0000");
  } else {
    $('.c').css("backgroundColor", "#00FF00");
  }
});


$('.add').click(function() {

  var tr = '<tr>' + '<td>Cota1</td>' +
    '<td><input type="text" name="tol_cota1[]" class="form-control a"></td>' +
    '<td><input type="text" name="tolb_cota1[]" class="form-control b"></td>' +
    '<td><input type="text" name="medido_cota1[]" class="form-control c"></td>' +
    '<td><input type="button"  class="btn btn-danger remove" value="Remove Line"></td>' + '</tr>';

  $('.details').append(tr);


});

// delete row 
$('.details').delegate('.remove', 'click', function() {
  var con = confirm("Are you sure you want to remove the line?");
  if (con) {
    $(this).parent().parent().remove();
  }
});

The change event doesn't bubble, which means you will need an event listener for every input in your form.

jQuery will take care of that automatically when using using the .on() method with a selector (its second parameter), which is equivalent to the old deprecated .delegate() method. From its description in the official docs, it will:

Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

So, if you do something like this:

$('.details').on('change', 'input', (event) => { ... });

This will listen for change events on any <input> element inside all elements matching the .details selector, regardless if they already existed when the method was called or if they were created afterwards as it is your case.

Now, once a change event occurs, you should use the .parent(), .eq and .find() methods to select the row in which the <input> that triggered the event is located, from there you get all 3 inputs based on their position or selector, their value, and do your logic to update that specific row.

Anyway, if instead of listening for change events you use input, which does bubble, you can benefit from event delegation. This means that a single event listener will be created for the whole <tbody> in this case, instead of one per <input>. Using event.target you will be able to distinguish which one triggered the event, which you need to use anyway to get the other inputs in the same row.

All together, it will look something like this:

// Better to keep the reference instead of getting it each time:

const details = $('#details'); 

details.on('input', 'input', (event) => {
    const children = $(event.target).parents().eq(1).children();
    const avgInput = children.eq(3).find('input');
    const max = parseInt(children.eq(1).find('input').val());
    const min = parseInt(children.eq(2).find('input').val());
    const avg = parseInt(avgInput.val());
    
    if (isNaN(max) ||isNaN(min)|| isNaN(avg)) {
      // Don't do anything if any of them is blank.
      
      return;
    }

    avgInput.css('backgroundColor', avg > max || avg < min ? '#ff0000' : '#00FF00');      
});

details.on('click', '.remove', (event) => {   
  if (confirm('Are you sure you want to remove the line?')) {
    $(event.target).parents().eq(1).remove();
  }
});

$('#add').click(() => {                    
  details.append(`
    <tr>
     <td>Cota1</td>
     <td><input type="text"></td>
     <td><input type="text"></td>
     <td><input type="text"></td>
     <td><button class="remove">DELETE</button></td>
    </tr>
  `);
});

body {
  font-family: sans-serif;
  font-size: .75rem;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
  position: relative;
}

table th, 
table td {
  width: 20%;
  padding: 0;
  border-bottom: 1px solid #EEE;
  height: 1.75rem;
}

input {
  width: 100%;
  box-sizing: border-box;
  padding: .5rem;
  border: none;
  outline: none;
  text-align: center;
}

input:hover {
  background: #FAFAFA;
}

input:focus {
  background: #FFA;
}

.remove {
  width: 100%;
  box-sizing: border-box;
  padding: .5rem;
  border: none;
  outline: none;
  background: #FFF;
  cursor: pointer;
}

.remove:hover {
  background: #F44;
}

#add {
  width: 100%;
  border: none;
  background: #FFF;
  padding: .5rem;
  border-radius: 2px;
  color: #000;
  text-transform: uppercase;
  font-size: .75rem;
  margin: 1rem 0 0;
  box-shadow: 0 0 1rem rgba(0, 0, 0, .25);
  transition: box-shadow ease-in .125s;
}

#add:hover {
  box-shadow: 0 0 .5rem rgba(0, 0, 0, .25);
}

<table>
  <thead>
    <tr>
      <th> </th>
      <th>TOL +</th>
      <th>TOL -</th>
      <th>AVG</th>
      <th></th>
    </tr> 
  </thead>
  
  <tbody id="details">
    <tr>
     <td>Cota1</td>
     <td><input type="text"></td>
     <td><input type="text"></td>
     <td><input type="text"></td>
     <td> </td>
    </tr>
  </tbody>
</table>

<button id="add">ADD</button>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</div>

the best way would be using the closest function

$(".c").change(function(){

        if($(this).val() > $(this).closest('.a').val() || $(this).closest('.c').val() < $('.b').val()) 
                {
         $(this).closest('.c').css( "backgroundColor", "#ff0000" );    
                }else{
                $(this).closest('.c').css( "backgroundColor", "#00FF00" );        
                }           
        });