Javascript 使用jQuery自动计算金额

我有一个简单的表单，可以自动计算金额字段中输入的金额

“总计”字段仅在输入第一行的“金额”字段时更新。未更新后续行的“总和”字段`

身体{
字体系列：无衬线；
}
#总和{
字号：18px；
字体大小：粗体；
颜色：#174C68；
}
.金额{
背景色：#FEFFB0；
//字体大小：粗体；
文本对齐：右对齐；
}
发票号。
发票日期
描述
数量
添加行
总额：
0
$（文档）.ready（函数（）{
var i=1；
var j=1；
$（“#添加_行”）。单击（函数（）{
$（'#addr'+i）.html（“+（i+1）+”）；
$（'#tab_logic'）。追加（''）；
i++；
});
$（'.amt'）。每个（函数（）{
$（this）.keyup（function（）{
计算um（）；
});
});
$（'.amt'+j）.each（函数（）{
$（this）.keyup（function（）{
计算um（）；
});
j++；
});
});
函数calculateSum（）{
var总和=0；
$（“.amt”）。每个（函数（）{
如果（！isNaN（this.value）&&this.value.length！=0）{
sum+=parseFloat（此.value）；
}
});
$（“#sum”）.html（sum.toFixed（2））；
}

不需要任何

键控

，您可以使用

amt

将处理委托给其中任何一个

基本上，删除此处理：

$('.amt').each(function() {

  $(this).keyup(function() {
    calculateSum();
  });
});

$('.amt' + j).each(function() {

  $(this).keyup(function() {
    calculateSum();
  });
  j++;
});

替换为：

// Use a change event delegate on amt
$('#tab_logic').on('change', '.amt', function() {
    calculateSum();
});

尝试下面的可运行示例

单击微调器按钮，总和更改立即生效。如果键入了值，则在字段失去焦点后，总和将更新

身体{
字体系列：无衬线；
}
#总和{
字号：18px；
字体大小：粗体；
颜色：#174C68；
}
.金额{
背景色：#FEFFB0；
//字体大小：粗体；
文本对齐：右对齐；
}
发票号。
发票日期
描述
数量
添加行
总额：
0
$（文档）.ready（函数（）{
var i=1；
var j=1；
$（“#添加_行”）。单击（函数（）{
$（'#addr'+i）.html（“+（i+1）+”）；
$（'#tab_logic'）。追加（''）；
i++；
});
});
//在amt上使用事件委托
$（'tab_logic'）。on（'change'，'.amt'，function（）{
计算um（）；
});
函数calculateSum（）{
var总和=0；
$（“.amt”）。每个（函数（）{
如果（！isNaN（this.value）&&this.value.length！=0）{
sum+=parseFloat（此.value）；
}
});
$（“#sum”）.html（sum.toFixed（2））；
}

提交表单时，我是否可以检查如何获取后续行的值？目前，我可以从第一行获取值。对不起，新加入此论坛。如何在注释中添加代码片段？我认为您也不需要

I

（但我可能错了）。如果不使用

i

引用，输出看起来如何？我希望看到

invoiceNo[]

，然后是

date[]

和其他人。我也会复制你需要检查的内容。好吧，正如我所想，

I

不需要制作索引。将这四个输入与带有名称的

[]

一起使用。然后，您可以通过获得1的计数来处理循环中的这些数据，这是所有4个输入的相同数组索引引用。试试看，然后用下面的代码检查：

if（！empty（$\u POST））{$items=count（$\u POST['invoiceNo']）；echo'Total Entries:'，$items'：
'；for（$i=0；$i<$items；$i++）{echo'
，$\u POST['invoiceNo'][$i]；echo'，'，，$\u POST['date']i']；echo'，'，，$\u POST['date'.[$i]，'，$POST['；}}

…（续）然后在循环中，您可以对检索到的值执行任何需要的查询。提交后的数组。在该输出中，所有

[0]

索引对应于第一行，所有

[1]

索引对应于第二行，依此类推。是的，我现在可以在提交后获得值。谢谢保罗的建议。