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

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 计算插件 (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 行（在函数内部），但我认为这可以保持可读性。