JQuery массив входов, добавить значения - PullRequest
Новая
       10

JQuery массив входов, добавить значения

0 голосов
/ 12 мая 2018

Рассмотрим десятки входных данных, подобных приведенным ниже.Мне нужно вычесть GLOSA, добавить AJUSTE из VALAUT и поместить результат в APAGAR, в каждой строке отдельно, так как пользователь вводит новые значения в GLOSA и AJUSTE. 

<input type="hidden" id="valaut[]" name="valaut[0]" value="100" />
<input type="text"   id="glosa[]"  name="glosa[0]"  value="10" />
<input type="text"   id="ajuste[]" name="ajuste[0]" value="5" />
<input type="text"   id="apagar[]" name="apagar[0]" value="0" />
<br/>
<input type="hidden" id="valaut[]" name="valaut[1]" value="200" />
<input type="text"   id="glosa[]"  name="glosa[1]"  value="0" />
<input type="text"   id="ajuste[]" name="ajuste[1]" value="0" />
<input type="text"   id="apagar[]" name="apagar[1]" value="0" />

Я пробовал много подходов, например,это http://jsfiddle.net/rve232g8/, но не удалось.

Кто-нибудь может помочь?

Ответы [ 3 ]

0 голосов
/ 12 мая 2018

Вот рабочий фрагмент, использующий jQuery, который должен удовлетворить ваши потребности:
(Смотрите комментарии в моем фрагменте) 

// Update function
function update() {
  var valaut, glosa, ajuste;
  // For each "apagar", do the following:
  $('input[name^=apagar]').each(function(index) {
    // Get values
    valaut = $('input[name^=valaut]')[index].value;
    glosa = $('input[name^=glosa]')[index].value;
    ajuste = $('input[name^=ajuste]')[index].value;
    // Store the result (calculation using unary operator)
    $(this).val(+valaut - +glosa + +ajuste);
  });
}

// Launch function on load
update();
// Bind update function on inputs changes
$('input[name^=glosa], input[name^=ajuste]').on('keyup', update);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="valaut[]" name="valaut[0]" value="100" disabled/>
<input type="text" class="glosa[]" name="glosa[0]" value="10" />
<input type="text" class="ajuste[]" name="ajuste[0]" value="5" />
<input type="text" class="apagar[]" name="apagar[0]" value="0" />
<br/>
<input type="text" class="valaut[]" name="valaut[1]" value="200" disabled/>
<input type="text" class="glosa[]" name="glosa[1]" value="0" />
<input type="text" class="ajuste[]" name="ajuste[1]" value="0" />
<input type="text" class="apagar[]" name="apagar[1]" value="0" />
<br />
<p><u>Comments:</u><br /> Changed id to class in the inputs, as ids must be unique.<br /> Removed "hidden" and added "disabled" to see the "valauts" for testing.</p>

Редактировать: я добавил использование унарного оператора, так как он действительно упрощает код!
Документация: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus_()

Надеюсь, это поможет.

0 голосов
/ 14 мая 2018

В обоих решениях @Edie и @Takit Isy я получил именно тот результат, который мне нужен. Большое спасибо!

0 голосов
/ 12 мая 2018

Вы можете использовать jQuery подстановочный знак в качестве селектора.

$('[name^=glosa], [name^=ajuste]').bind("change keyup input", function() {
  //Get the group number
  var group = $(this).attr('name').match(/\[(.*?)\]/)[1];

  //Get the values
  var valaut = $('[name="valaut[' + group + ']"]').val();
  var glosa = $('[name="glosa[' + group + ']"]').val();
  var ajuste = $('[name="ajuste[' + group + ']"]').val();

  //Check if number
  if (!isNaN(valaut) && !isNaN(glosa) && !isNaN(ajuste)) {

    //Calculate apagar 
    var apagar = Number(valaut) - Number(glosa) + Number(ajuste);

    //Set value for apagar
    $('[name="apagar[' + group + ']"]').val(apagar);
  } else {
    //Some input non numbers. Clear the apagar
    $('[name="apagar[' + group + ']"]').val("");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" id="valaut[]" name="valaut[0]" value="100" />
<input type="text" id="glosa[]" name="glosa[0]" value="10" />
<input type="text" id="ajuste[]" name="ajuste[0]" value="5" />
<input type="text" id="apagar[]" name="apagar[0]" value="0" />
<br/><br/>
<input type="hidden" id="valaut[]" name="valaut[1]" value="200" />
<input type="text" id="glosa[]" name="glosa[1]" value="0" />
<input type="text" id="ajuste[]" name="ajuste[1]" value="0" />
<input type="text" id="apagar[]" name="apagar[1]" value="0" />

Примечание: Я не совсем уверен, что формула, которую я использовал, точна в том, что вам нужно.Вы можете изменить его.

...