Обновить значение HTML при изменении входных значений

Question

Я пытаюсь обновить итоговое значение при изменении значения одного из факторов. Я создал jsFiddle и предоставил комментарий к нему (строка 16). Это, наверное, самое простое место, чтобы увидеть эту проблему.

Это простые суммы, поэтому у меня есть таблица, которая выглядит примерно так.

Row 1 | 100 | 5 | 
Row 2 | 200 | 10 | 
Totals | 300 | 15 | 

Табличные ячейки в строках 1 и 2 содержат текстовые поля. Ячейки таблицы в общей строке содержат html. Идентификаторы и имена входов/входов div автоматически генерируются (см., Например, ссылку jsFiddle).

Все работает нормально, когда я меняю количество ввода, но мне сложно установить значение исходного элемента в новую сумму. Когда я обновляю поле во второй раз, расчет предполагает исходное значение, которое выдает мои суммы. Я пробовал как jQuery, так и javascript-методы, а также пытался с определенным идентификатором (а не $ (это)) все безрезультатно. Я новичок в javascript, поэтому, наверное, отсутствует что-то простое.

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

window.formTable = $('#def-inv-table'); 
$('input.form-text').change(function() { 
    var currentId  = $(this).attr('id'); 
    var orgValue  = this.getAttribute('value'); 
    var newValue  = this.value; 
    var changeAmount = newValue - orgValue; 
    var pieces   = currentId.split(/\s*\-\s*/g); 
    var key   = pieces[1]; 
    var orgTotalString = window.formTable.find('#total-' + pieces[2]).html(); 
    var orgTotal  = Number(orgTotalString.replace(/[^0-9\.]+/g,"")); 
    var newTotal  = orgTotal + changeAmount; 

    window.formTable.find('#total-' + pieces[2]).css("background", "blue"); 
    window.formTable.find('#total-' + pieces[2]).html(newTotal); 

//Here is my problem. This is not updating. I have tried the javascript way 
//with document.getElementbyId and the jQuery way. Neither sets the value. 
    $(this).val(newValue); 
    var testVal = $(this).val(); 
    //alert(testVal); 
}); 

Пожалуйста, дайте мне знать, если вы хотите, чтобы я, чтобы вставить HTML. Я оставляю его, так как он находится в jsFiddle.

ДОБАВЛЕНИЕ HTML

<form name="test-form" id="test-form"> 
    <div id="def-inv-table"> 
    <table> 
     <tr> 
     <td> 
      <input type="text" id="no-413-invreturned" name="investments[413][invreturned]" value="3000.00" class="form-text"> 
     </td> 
     <td> 
      <input type="text" id="no-413-commreturned" name="investments[413][commreturned]" value="23.42" class="form-text"> 
     </td> 
     </tr> 

     <tr> 
     <td> 
      <input type="text" id="no-414-invreturned" name="investments[414][invreturned]" value="1000.00" class="form-text"> 
     </td> 
     <td> 
      <input type="text" id="no-414-commreturned" name="investments[414][commreturned]" value="15.89" class="form-text"> 
     </td> 
     </tr> 
     <tr> 
     <td id="total-invreturned">4,000.00</td> 
     <td id="total-commreturned">39.31</td> 
     </tr> 
    </table> 
    </div> 
<form> 

Answer 1

Попробуйте это: http://jsfiddle.net/dQKXt/86/

$('.form-text').change(function() { 
    var columnIndex = $(this).parent().index() + 1; 
    var sum = 0; 
    $('tr td:nth-child(' + columnIndex + ')').find('input').each(function() { 
     var floatValue = parseFloat($(this).val()); 
     $(this).val(floatValue.toFixed(2)); 
     sum += floatValue;   
    });  

    // here format your sum with , . etc to be the same as 4,000.00 
    $('tr td:nth-child(' + columnIndex + '):last').html(sum.toFixed(2)); 

}); 

Предполагая, что вы хотите нормальную таблицу с суммой строки