0

各行の合計をjQueryで自動更新したいのですがうまくいきません。

jQueryコードは次のとおりです。

$('.val1').keydown(function(e) {
    var val1 = this.value;
    var val2 = $('.val2').val();
    var total = val1 * val2;
    $('.equal').val(total);
});

HTMLコードは次のとおりです。

<table>
  <thead>
    <tr>
      <th>Value 1</th>
      <th>Value 2</th>
      <th>Equal</th>
    </tr>
  </thead>
  <tr>
    <td><input class="val1" name="val1" type="text" value=""></td>
    <td><input class="val2" name="val2" type="text" value=""></td>
    <td><input class="equal" name="equal" type="text" value=""></td>
  </tr>
  <tr>
    <td><input class="val1" name="val1" type="text" value=""></td>
    <td><input class="val2" name="val2" type="text" value=""></td>
    <td><input class="equal" name="equal" type="text" value=""></td>
  </tr>
  <tr>
    <td><input class="val1" name="val1" type="text" value=""></td>
    <td><input class="val2" name="val2" type="text" value=""></td>
    <td><input class="equal" name="equal" type="text" value=""></td>
  </tr>
</table>
4

2 に答える 2

2

.val1あなたが行動している文脈ですべてを対象とする必要があります。使用するコードは次のとおりです。

$('.val1').keyup(function(e) {
    var val1 = parseInt($(this).val());
    var val2 = parseInt($(this).parent().siblings('td').find('.val2').val());
    var total = val1 * val2;
    $(this).parent().siblings('td').find('.equal').val(total);
});

.keydown()キー押下から値を受け取る.keyup()前にイベントが発生していたため、に変更されました。.val12 つの値を乗算しているので、値として終わらないparseIntように、両方を で数値に変換しました。.equalNaN

ここで実際の動作を確認できます: http://jsfiddle.net/3hqkR/1/

于 2013-07-12T18:41:10.500 に答える
0

$('.val2')このクラス名を持つすべての要素の配列を提供します。

したがってvar val2 = $('.val2').val();、決して機能しません。

イベントが発生した場所に関連する最初の要素を取得する必要があります。

var val2 = $(this).prev('tr').find('.val2').val();
于 2013-07-12T18:33:06.833 に答える