2

いずれかの要因の値が変わったときに合計を更新しようとしています。jsFiddleを作成し、コメントを提供しました（16行目）。これはおそらく問題を確認するのに最も簡単な場所です。

単純な合計なので、次のようなテーブルがあります。

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

行1と行2のテーブルセルにはテキストフィールドが含まれています。合計行のテーブルセルにはhtmlが含まれています。div /入力のIDと名前は自動生成されます（たとえば、jsFiddleリンクを参照してください）。

初めて入力量を変更したときはすべて正常に機能しますが、元の要素の値を新しい合計に設定するのに苦労しています。フィールドを2回更新すると、計算では元の値が考慮されます。これにより、合計が失われます。私は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 に答える