0

我有一个 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 用例，我假设存在一些最佳实践方法来实现这一点。

4

2 回答 2

1

jQuery Calculation 插件( 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();
于 2009-09-24T21:23:45.347 回答
0

这应该可以解决问题：

$('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 行（在函数内部），但我认为这使它保持可读性。

于 2009-09-24T22:23:38.457 回答