2

当其中一个因素的值发生变化时，我正在尝试更新总数。我创建了一个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>
4

1 回答 1

3

试试这个：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));

});

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

于 2013-03-12T16:23:40.157 回答