Question

我正在尝试在其中一个因素的值发生变化时更新总计。我创建了jsFiddle并对其进行了评论（第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，请告诉我。我把它留在了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));

});

假设您想要一个带有和行的普通表

输入值更改时更新HTML的值

1 个答案: