동적 입력 필드의 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을 (내 테이블에서 같은 행을 생성하고) 이 코드는 그것이 전체를 업데이트하지 않는다는 것을 의미합니다. 두 번째 입력 필드에 무언가를 쓸 때 덮어 씁니다. 그래서 내가 찾고있는 것은 단지 평균을 업데이트하는 방법입니다.

Answer 1

평균 값을 찾기 위해 모든 요소를 ​​선택하지 않았습니다.

가

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

첫번째 라인만을 선택 입력 바로 위에 TD 선택 :

이 라인 문제이다. 따라서 유일한 자식은 변경된 입력입니다. 다른 입력은 무시됩니다. 그래서 그 단일 값을 3으로 나눕니다. 이것은 최종 평균이 완전히 잘못되었음을 의미합니다.

이 예제가 올바른지 - 우리가 내 모든 입력을 얻을 수 .find()를 사용하고 <tr>까지 모든 방법을 이동하고 <tr>는 (그것은 단지 한 수준 아래로 간다 때문에, 아이들을 사용할 수 있도록 단지 좋겠 <td>을 얻으십시오.

또한 하드 코딩 된 값이 아닌 입력 수로 나눠서 더 유연하게 만들었습니다. 행에 입력을 더 추가하면 해당 값도 자동으로 평균화됩니다 .

$(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); 

    }); 

});