使用 jQuery 为总计添加行总计答案

【问题标题】：Adding up line totals for grand total with jQuery使用 jQuery 为总计添加行总计
【发布时间】：2013-01-13 16:06:45
【问题描述】：

我正在构建一个简单的订单表格，当客户指定所需数量时，它会计算每个产品的生产线总数。

当客户更改数量时，我试图让表单从总计中添加（或减去）行总计。

我在这里计算每一行的总数：

$('#qtybox').change(function(){
    qty = $(this).val()
    if(qty < 10)
        $('#linetotal').text(qty * 925);
    else
       $('#linetotal').text(qty * 895);
 });

$('#qtybox1').change(function(){
    qty1 = $(this).val()
    if(qty1 < 10)
        $('#linetotal1').text(qty1 * 1045);
   else
      $('#linetotal1').text(qty1 * 1015);
});    

$('#qtybox2').change(function(){
    qty2 = $(this).val()
    if(qty2 < 10)
        $('#linetotal2').text(qty1 * 1045);
   else
      $('#linetotal2').text(qty1 * 1015);
});

但我不知道如何将这些添加到总计中，并在每个数量输入字段失焦时对其进行更新。非常感谢任何帮助。

【问题讨论】：

标签： jquery forms

【解决方案1】：

您可以通过重构使您的代码更具可读性和可扩展性。向具有共同属性（如行为和外观）的元素添加类将使使用较少数量的函数更容易控制事物。查看this jsfiddle 以查看工作示例。这是javascript组件：

var BULK_CUTOFF = 10,
  REGULAR_PRICES = [985, 1045, 1045],
  BULK_PRICES = [925, 1015, 1015];

function getPrice(qty, idx) {
  if (isNaN(qty)) {
    return 0;
  }
  if (qty < BULK_CUTOFF) {
    return qty * REGULAR_PRICES[idx];
  }
  return qty * BULK_PRICES[idx];
}

function updateGrandTotal() {
  var total = 0;
  $('input.linetotal').each(function () {
    var value = parseInt($(this).val());
    if (!isNaN(value)) {
      total += value;
    }
  });
  $('#grandtotal').val(total);
}

$('input.qtybox').keyup(function () {
  var $this = $(this),
    idx = $this.index('input.qtybox'),
    qty = parseInt($this.val());
  $this.next('.linetotal').val(getPrice(qty, idx));
  updateGrandTotal();
});

【讨论】：

非常感谢。这很有意义。如果我可以问你一件事，你有什么理由可以想到为什么这在一张桌子上不起作用？是 .index() 吗？如果我删除一个标签，它会删除我所有的表格格式，它会很好地工作。实在想不通。

@Alex 这一切都可以在表格中工作，但正如您所建议的，提供给index() 的参数很可能（以及@987654324 可能发生的情况）需要使用 @ 才能使其正常工作（因为它们都依赖于 DOM 中特定元素的位置）。不过，如果没有看到有问题的 html，就很难说。

【解决方案2】：

只需在三个函数中添加一行（假设总计有 id grandtotal）：

$('#grandtotal').text( $('#linetotal').val() + $('#linetotal1').val() + $('#linetotal2').val() )

查看您的代码中包含的上述行：

$('#qtybox').change(function(){
    qty = $(this).val()
    if(qty < 10)
        $('#linetotal').text(qty * 925);
    else
       $('#linetotal').text(qty * 895);
    $('#grandtotal').text($('#linetotal').val() + $('#linetotal1').val() + $('#linetotal2').val() )

 });

$('#qtybox1').change(function(){
    qty1 = $(this).val()
    if(qty1 < 10)
        $('#linetotal1').text(qty1 * 1045);
   else
      $('#linetotal1').text(qty1 * 1015);
   $('#grandtotal').text($('#linetotal').val() + $('#linetotal1').val() + $('#linetotal2').val() )
});    

$('#qtybox2').change(function(){
    qty2 = $(this).val()
    if(qty2 < 10)
        $('#linetotal2').text(qty1 * 1045);
   else
      $('#linetotal2').text(qty1 * 1015);
    $('#grandtotal').text($('#linetotal').val() + $('#linetotal1').val() + $('#linetotal2').val() )
});

【讨论】：

【解决方案3】：

嗯，我建议你这样做：

1) 像对所有其他输入字段（如 qtybox、qtybox1 等）所做的那样，创建并分配 id 到 net total 文本框。将其初始值设置为 0 2）在您计算价格的java脚本函数中，并使用您在HTML页面上反映相同的id字段，它们在该脚本本身中同时将这些值添加到最终总框的值中，并动态更新其文本为就像你对其他文本框所做的一样......所以它会像

在你的 if else 块之后

$('#id-of-your-total-box').text(value-of-qty1+value-of-total-box);

注意：这些是我关于如何做的一步一步的建议。万事如意

【讨论】：

【解决方案4】：

将所有 qtbox 即 1,2,3 放在一个类中，并使用 .blur() 事件来更新总计。类似这样的事情

$('.qtbox').blur(function(){
var total=0;
$('.qtbox').each(total+$(this).val());
$('#grandtotal').text(total);
})

【讨论】：