Как получить процентное содержание нескольких полей ввода в каждой строке, используя javascript

Question

Я пытаюсь рассчитать процент от двух входных данных, а затем процент от общего количества, моя проблема в том, что у меня есть 4 набора столбцов с одинаковым процессом ввода полей, но разные итоговые значения в каждой сумме. Вот мой образец HTML в табличной форме для.

<td>Management</td>
<td><input type="text" class="input-light percent-1"" name="local[]" value="">1 2</td>
<td><input type="text" class="input-light percent-2" name="non_local[]" value=""></td>
<td><input type="text" class="input-light p-total" name="local_percentage[]" value="">
    <input type="hidden" name="employ_position_id[]" value="1">
</td>
<td><input type="text" class="input-light percent-1" name="local[]" value="">1 2</td>
<td><input type="text" class="input-light percent-2" name="non_local[]" value=""></td>
<td><input type="text" class="input-light p-total" name="local_percentage[]" value="">
    <input type="hidden" name="employ_position_id[]" value="1">
</td>
<td><input type="text" class="input-light percent-1"" name="local[]" value="">1 2</td>
<td><input type="text" class="input-light percent-2" name="non_local[]" value=""></td>
<td><input type="text" class="input-light p-total" name="local_percentage[]" value="">
    <input type="hidden" name="employ_position_id[]" value="1">
</td>

Вот мой javascript код, который я постараюсь улучшить. Любое предложение приветствуется.

$('.percent-1').on('input', function() {
    console.log("Input 1");
    calculate();
 });
 $('.percent-2').on('input', function() {
     calculate();
 });
 function calculate(){
     var pPos = parseInt($('.percent-1').val()); 
     var pEarned = parseInt($('.percent-2').val());
     var perc="";
     if(isNaN(pPos) || isNaN(pEarned)){
         perc=" ";
     }else{
     perc = ((pEarned/pPos) * 100);
 }
  $('.p-total').val(perc);
} 

Answer 1

Вы можете получить результат с помощью index в качестве ключа.

Вы можете получить все элементы одного класса, используя querySelectorAll () метод как,

const input1 = document.querySelectorAll('.percent-1');
const input2 = document.querySelectorAll('.percent-2');
const total = document.querySelectorAll('.p-total');

querySelectorAll() даст массив элементов, поэтому вы можете выполнить итерацию и включить addEventListener () в каждом элементе, а затем передать index Введенный элемент в calculate работает как,

input1.forEach((el,index) => {
  el.addEventListener('input',() => {
     calculate(index);
  })
})

Затем с помощью индекса вы можете получить значение из соответствующего ввода, например,

var pPos = parseInt(input1[index].value); 

Тот же сценарий для percent-2 и total.

Рабочий фрагмент следующим образом,

 function calculate(index){
     var pPos = parseInt(input1[index].value); 
     var pEarned = parseInt(input2[index].value);
     var perc="";
     if(isNaN(pPos) || isNaN(pEarned)){
         perc=" ";
     }else{
     perc = ((pEarned/pPos) * 100);
 }
  total[index].value = perc;
} 


const input1 = document.querySelectorAll('.percent-1');
const input2 = document.querySelectorAll('.percent-2');
const total = document.querySelectorAll('.p-total');

input1.forEach((el,index) => {
  el.addEventListener('input',() => {
     calculate(index);
  })
})

input2.forEach((el,index) => {
  el.addEventListener('input',() => {
     calculate(index);
  })
})

<table>
  <tbody>
    <tr>
      <td>Management</td>
<td><input type="text" class="input-light percent-1"" name="local[]" value="">1 2</td>
<td><input type="text" class="input-light percent-2" name="non_local[]" value=""></td>
<td><input type="text" class="input-light p-total" name="local_percentage[]" value="">
    <input type="hidden" name="employ_position_id[]" value="1">
</td>
<td><input type="text" class="input-light percent-1" name="local[]" value="">1 2</td>
<td><input type="text" class="input-light percent-2" name="non_local[]" value=""></td>
<td><input type="text" class="input-light p-total" name="local_percentage[]" value="">
    <input type="hidden" name="employ_position_id[]" value="1">
</td>
<td><input type="text" class="input-light percent-1"" name="local[]" value="">1 2</td>
<td><input type="text" class="input-light percent-2" name="non_local[]" value=""></td>
<td><input type="text" class="input-light p-total" name="local_percentage[]" value="">
    <input type="hidden" name="employ_position_id[]" value="1">
</td>
    </tr>
  </tbody>
</table>