使用jquery更新表行中的合计

Update total in table row with jquery

本文关键字：jquery 更新 使用      更新时间：2023-09-26

我有一个表

<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(?);
});

但这似乎有点不愉快。

您可以使用：

$('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)
});

工作演示

如果可以为数量、价格和总输入分配一些伪类，那么阅读和控制起来会非常容易。

类似这样的东西：

HTML

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

脚本

$('table tbody tr').find('.qty, .prc').on('keyup',function() {
    var parent = $(this).parents('tr');
    var quantity = parseInt(parent.find('.qty').val())||0;
    var price = parseInt(parent.find('.prc').val())||0;
    parent.find('.total').val(quantity*price);

});

检查此处的工作示例

就我个人而言，我不喜欢根据元素的位置来选择元素。如果你后来更改了它们，或者添加了另一个，你的代码就坏了。我会做一些类似的事情：

$(this).closest('tr').find('input[name=total]').val(?);
相关文章：