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()因为事件在.val1从按键接收到值之前已触发。由于您将两个值相乘，因此我将它们都转换为数字，parseInt因此.equal最终不会NaN作为值。

你可以在这里看到它的实际效果：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 回答