javascript - 使用 jquery 更新表行中的总数

Question

我有一张 table

<table>
  <tbody>
    <tr>
      <td><input type="text" name="quantity" /></td>
      <td><input type="text" name="price" /></td>
      <td><input type="text" name="total" disabled />
    </tr>
    <tr>
      <td><input type="text" name="quantity" /></td>
      <td><input type="text" name="price" /></td>
      <td><input type="text" name="total" disabled />
    </tr>
    <tr>
      <td><input type="text" name="quantity" /></td>
      <td><input type="text" name="price" /></td>
      <td><input type="text" name="total" disabled />
    </tr>
    <tr>
      <td><input type="text" name="quantity" /></td>
      <td><input type="text" name="price" /></td>
      <td><input type="text" name="total" disabled />
    </tr>
  </tbody>
</table>

当数量或价格发生变化时，如何更新总计输入字段？

我想到了类似的东西

$('table tbody tr td').filter(':nth-child(1), :nth-child(2)').children('input').change(function() {
    $(this).parent('td').siblings('td').filter(':nth-child(3)').val(?);
});

但似乎有点不方便。

Answer 1

您可以使用:

$('table tbody tr td').find('input').keyup(function() {
  var total=0;
  total=(parseInt($(this).parent('td').siblings('td').not(':nth-child(3)').find('input').val())||0)+(parseInt($(this).val())||0);
  $(this).closest('tr').find('input:last').val(total)
});

Working Demo