Jquery значение чтения динамического поля ввода

Question

Я ищу способ прочитать значение динамически созданного поля ввода, а затем получить среднее из них. У меня есть tablerow с несколькими входами, и я хочу добавить все значения этих входов вместе и показать их в конце строки.

То, что я получил до сих пор:

Html (я генерировать такие строки в моей таблице):

<tr> 
<td><input type='number' class='userInput' name='userInput'></td> 
<td><input type='number' class='userInput' name='userInput'></td> 
<td><input type='number' class='userInput' name='userInput'></td> 
<td class='avg'>X</td> <!-- Average --> 
</tr> 

Мой JQuery код выглядит следующим образом:

$(document).on('input', '.userInput', function() { 
var parentRow = $(this).parents('td'); 
var inputs = parentRow.children('input'); 
var avgText = $(this).parents('tr').find('.avg'); 
var avg = 0;  
inputs.each(function() { 
avg += parseInt(this.value); 
}); 
avg /= 3; 
avgText.text(avg); 
}); 

Моя проблема с этот код состоит в том, что он не обновляет общее количество, он просто перезаписывает его, когда я что-то пишу во второе поле ввода. Так что я ищу, это способ просто обновить среднее.

Answer 1

Вы не выбираете все элементы, чтобы найти среднее значение.

Эти линии являются проблемой:

var parentRow = $(this).parents('td'); 
var inputs = parentRow.children('input'); 

Первая строка выбирает только тд непосредственно над выбранным входом. Поэтому его единственным дочерним элементом является вход, который был изменен. Остальные входы игнорируются. Таким образом, вы затем разделите это одиночное значение на 3, а это означает, что окончательное среднее значение полностью неверно.

Этот пример правильно - мы пройти весь путь до <tr>, а затем использовать .find(), чтобы получить все входы в пределах <tr> (не может использовать детей, потому что это только идет вниз на один уровень, так что вы бы просто получить <td> s.

Также я сделал его более гибким, делясь на количество входов, а не на жестко закодированное значение. Поэтому, если вы добавите больше входов в строку, это автоматически также усреднит их .

$(document).on('input', '.userInput', function() { 
    var parentRow = $(this).parents('tr'); 
    var inputs = parentRow.find('input'); 
    var avgText = parentRow.find('.avg'); 
    var avg = 0;  
    inputs.each(function() { 
     avg += parseInt(this.value); 
    }); 
    avg /= inputs.length; 
    avgText.text(avg); 
}); 

Answer 2

попробовать это - https://jsfiddle.net/mpy31eh7/

<table id="myTable"> 

    <tr> 
    <td> 
     <input type='number' class='userInput' name='userInput'> 
    </td> 
    <td> 
     <input type='number' class='userInput' name='userInput'> 
    </td> 
    <td> 
     <input type='number' class='userInput' name='userInput'> 
    </td> 
    <td ><label class="avg"></label></td> 
    <!-- Average --> 
    </tr> 
    <tr> 
    <td> 
     <input type='number' class='userInput' name='userInput'> 
    </td> 
    <td> 
     <input type='number' class='userInput' name='userInput'> 
    </td> 
    <td> 
     <input type='number' class='userInput' name='userInput'> 
    </td> 
    <td class='avg'>X</td> 
    <!-- Average --> 
    </tr> 
    <tr> 
    <td> 
     <input type='number' class='userInput' name='userInput'> 
    </td> 
    <td> 
     <input type='number' class='userInput' name='userInput'> 
    </td> 
    <td> 
     <input type='number' class='userInput' name='userInput'> 
    </td> 
    <td class='avg'>X</td> 
    <!-- Average --> 
    </tr> 
</table> 


$(document).ready(function() { 

    $("input[type=number]", "#myTable").change(function() { 

    var $parent = $(this).parents('tr'); 
    var allInputs = $("input[type=number]", $parent); 
    var total = 0; 

    $.each(allInputs, function(){ 
     total += $(this).val() === ''? +0 : +$(this).val(); 
    }); 

    $(".avg", $parent).text(total/3); 

    }); 

});