Question

我想用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>

Answer 1

您需要根据您所采取行动的.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/

Answer 2

$('.val2')将为您提供具有此类名称的所有元素数组。

因此var val2 = $('.val2').val();永远不会有效。

您需要获取事件发生位置的第一个元素RELATIVE：

var val2 = $(this).prev('tr').find('.val2').val();

如何在表格中累计多行？

2 个答案: