動的入力フィールドのJquery読み取り値

Question

私は、動的に作成された入力フィールドの値を読み取り、その平均値を取得する方法を探しています。私は複数の入力を持つtablerowを持っています、そして、それらの入力のすべての値を一緒に加えて、行の最後にそれらを表示したいと思います。

は、私がこれまでに得たもの：

<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); 
}); 

私の問題で

HTMLは（私は私のテーブルにこのような行を生成しています）このコードは、全体を更新しないので、第2の入力フィールドに何かを書き込むときに上書きされます。だから私が探しているのは、単に平均を更新する方法です。

Answer 1

平均値を見つけるためにすべての要素を選択するわけではありません。

これらの行は問題である。

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

最初の行のみが直ちに選択された入力上にTDを選択します。したがって、その唯一の子は変更された入力です。その他の入力は無視されます。したがって、その1つの値を3で割って、最終平均が完全に間違っていることを意味します。

この例は正しいです - 私たちは内のすべての入力を取得するために.find()を使用し、その後<tr>までのすべての道を行く、と<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); 

    }); 

});