Question

我有一个HTML表格结构，看起来像是：

PRICE       QUANTITY    TOTAL
[5____]     [2____]     10 (TOTAL1=PRICE1*QUANTITY1)

价格和数量列中的值是可编辑的。这些是HTML表单字段。

总列中的值不可编辑。相反，它们是左侧列的直接功能。

表的HTML表示形式为：

<table id="some_id">
  <tr>
    <td><input type="text" name="price1" value="5" /></td>
    <td><input type="text" name="quantity1" value="2" /></td>
    <td><input type="readonly" name="total1" /></td>
  </tr>
</table>

使用jQuery我想使它成为“total1”的值总是反映“price1”乘以“quantity1”的值。

问题：我知道有很多方法可以实现这一点 - 但使用jQuery做最简洁的方法是什么？

由于“自动更新/派生字段”应该是一个非常常见的jQuery用例，我会假设存在一些最佳实践方法来实现这一点。

Answer 1

jQuery Calculation plugin（jquery.calculation.js）解决了这个问题。

以下代码显示了如何使用jQuery Calculation来解决此特定情况下的问题：

function recalc() {
  $("[name=total1]").calc(  
    "p * q",
    {   
      q: $("input[name=quantity1]"),
      p: $("input[name=price1]")
    },
    function (s) {
      // set number of decimals of resulting value to zero
      return s.toFixed(0);
    },
    function (t) {
      // this runs after the calculation has been completed
    }
  );
}
$("input[name=price1]").bind("keyup", recalc);
$("input[name=quantity1]").bind("keyup", recalc);
recalc();

Answer 2

这应该可以解决问题：

$('input[name^="price"], input[name^="quantity"').keyup(function() {
    $rowTds = $(this).closest('tr').children('td'); // get the row tds
    price = $rowTds.eq(0).children('input').val(); // get the price
    quantity = $rowTds.eq(1).children('input').val(); // get the quantity
    $rowTds.eq(2).children('input').val(price * quantity); // store the value in the total field
});

这可能会缩短为2行（在函数内部），但我认为这使它保持可读性。

使用jQuery的类似Excel的自动更新表格单元格

2 个答案: