Question

我有一张桌子

<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

Answer 2

就个人而言，我宁愿不按他们的位置选择元素。如果你以后结束更改它们，或者添加另一个代码就会中断。我会做类似的事情：

$(this).closest('tr').find('input[name=total]').val(?);

Answer 3

如果您可以为数量，价格和总投入分配一些虚拟类别，那么很容易阅读和控制。

这样的事情：

<强> 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);


});

检查工作示例here

使用jquery更新表行中的总计

3 个答案: