Javascript jQuery项目和总计的发票计算_Javascript_Php_Jquery_Html

Javascript jQuery项目和总计的发票计算

javascript php jquery html

Javascript jQuery项目和总计的发票计算,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我是JavaScript新手我目前面临的问题：当您添加新行时，它正在添加该行（太棒了！）但是添加的第一个新行可以正常工作，在名称/id的末尾应用_0，但是当您添加更多行时，它不会应用_1、_2等。。但是相反地，我能解决这个问题吗我需要根据发票项目上添加的数字计算小计和总计，如价格、数量、折扣（数字或%）小计，然后从底部的所有内容计算总计。增值税目前在PHP中设置为一个变量，例如define（'VAT_RATE'，'20'），即20% 更新我已经尝试开始了，虽然得到了NaN，但它只使用cl

我是JavaScript新手

我目前面临的问题：

当您添加新行时，它正在添加该行（太棒了！）但是添加的第一个新行可以正常工作，在名称/id的末尾应用_0，但是当您添加更多行时，它不会应用_1、_2等。。但是相反地，我能解决这个问题吗

我需要根据发票项目上添加的数字计算小计和总计，如价格、数量、折扣（数字或%）小计，然后从底部的所有内容计算总计。增值税目前在PHP中设置为一个变量，例如define（'VAT_RATE'，'20'），即20%

更新

我已经尝试开始了，虽然得到了NaN，但它只使用class=“calculate”并添加到小计中，但我想这是一个开始。我增加了数量，但似乎并没有发挥球，增值税和总我并没有添加

JSFiddle：

JS:

$（文档）.ready（函数（）{
//将客户详细信息复制到shipping
$（'input.copy input'）。打开（“更改键控粘贴”，函数（）{
var thisID=$（this.attr（'id'）；
$（'input#'+thisID+“_ship”）.val（$（this.val（））；
});
//在发票上添加新产品行
$（“.add row”）。单击（函数（）{
$（“#发票_表”）。每个（函数（）{
var tds=“”；
每个（$（'tr:last td'，this），函数（索引，元素）{
var html=$（this.html（）.replace（/invoice\u product/g，'invoice\u product\u'+index）
.替换（/invoice\u product\u desc/g，“invoice\u product\u desc”+索引）
.替换（/invoice\u product\u qty/g，“invoice\u product\u qty”+索引）
.替换（/invoice\u product\u price/g，“invoice\u product\u price”+索引）
.替换（/invoice\u product\u sub/g，“invoice\u product\u sub”+索引）；
tds+=''+html+''；
});
tds+=''；
如果（$（'tbody'，this）.length>0）{
$（'tbody'，this）.append（tds）；
}否则{
$（此）.append（tds）；
}
});
返回错误
});
//添加价格和价格的更改事件
//仅限数量字段。。
//改变总数不应该影响任何事情
计算总数（）；
$（'.calculate'）。在（'change keyup paste'，function（）上{
更新目录（本）；
计算总数（）；
});
函数updateTotals（elem）{
//这将给出已更改元素的tr
var$container=$（elem.parent（）.parent（）；
var quantity=$container.find（'.calculate quantity'）.val（）；
var price=$container.find（'.calculate'）.val（）；
var小计=parseInt（数量）*parseFloat（价格）；
$container.find（'.calculate sub'）.text（小计.toFixed（2））；
}
函数计算器总计（）{
//这将通过小计和
//在这里计算总数和数量
变量lineTotals=$（'.calculate sub'）；
var grandTotal=0.0；
var totalQuantity=0；
$。每个（行总数，函数（i）{
grandTotal+=parseFloat（$（lineTotals[i]）.text（））；
});
$（'.invoice sub-total'）.text（parseFloat（grandTotal）.toFixed（2））；
}
});

首先，必须对动态创建的输入字段使用事件委派：

// delegate events on #invoice_table:
$('#invoice_table').on('change keyup paste', '.calculate', function() {
    updateTotals(this);
    calculateTotal();
});

接下来，您使用

.text（）

更新输入字段：

$container.find('.calculate-sub').text(subtotal.toFixed(2));

虽然您应该使用

.val（）

：

在

calculateTotal（）

方法中也是如此，您还应该使用

.val（）

其次，这一部分是不必要的：

$("#invoice_table").each(function () {

因为您只有一个表（DOM中只有一个元素可以有

id

）

最后，我不会使用

id

属性，也不会为输入字段指定数组名称。这样，您就不必使用

.replace（）

，并且可以轻松地将所有值作为数组发送到后端应用程序

另外，我最初会

clone（）

整个

tr

元素，以后再使用它，而不是为每次单击设置循环

（注意，我已删除了

id

属性，并在输入字段名称中添加了

[]

）

如何检索发送到PHP的值的示例
（循环内的每个迭代将与每个

tr

）类似：