Javascript 当输入值更改时更新HTML的值

我试图在其中一个因素的值发生变化时更新总数。我已经创建了一个文档，并对其进行了评论（第16行）。这可能是最容易看到问题的地方

这是简单的求和，所以我有一个类似这样的表

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

第1行和第2行中的表格单元格包含文本字段。总计行中的表格单元格包含html。div/输入的id和名称是自动生成的（例如，请参阅jsFiddle链接）

在我第一次更改输入量时，一切正常，但我很难将原始元素的值设置为新的和。当我第二次更新字段时，计算会考虑原始值——这会使我的总和偏离。我尝试过jQuery和javascript方法，也尝试过使用特定的id（不是$（this））都没有用。我是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，请告诉我。我把它删掉了，因为它在JSFIDLE中

添加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>

4,000.00
39.31

试试这个：

---

假设您想要一个包含sum行的普通表

，那么您可能需要包含HTML。JSFIDLE被某些防火墙阻止。您在此处使用

window.formTable.find（'#total-'+pieces[2]）.html（newTotal）使用
.html
方法。请尝试仅使用
.val（）
方法Callssory，我的解释中有错误。我已经编辑了描述。总行包含html，而不是输入。@PeterThompson-脚本的行为非常奇怪-更改该行上的一个值时更新所有列是正常行为吗？是否需要更新总值的普通表？alex.dominte-脚本仅更新该列的总值。因此，如果第1列中的任何值发生变化，那么总计行将更新（第2列相同），我已经检查了JSFIDLE，这是正常工作的。我看到的唯一问题（我可能遗漏了一些东西）是，当我第二次更改值时，总和不正确。alex.dominte-感谢您的帮助。这正是我所需要的。请让我知道，如果我需要做什么以外的检查你的答案来完成这个问题。现在我只需要研究一下你的代码，看看我一开始应该做些什么。@PeterThompson-欢迎你。是的，接受ASWER应该可以完成这项工作。你让别人知道你的问题已经解决了
$('.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));

});