Javascript jquerytotal和subtotal给出了NaN

我正在使用jQuery创建一个总计和小计表，但我遇到了很多问题。第一个问题是，当我重新加载此页面时，尽管默认情况下输入了输入值，但总计和小计仍会显示

NaN

第二个问题，第二行的数据等等，仍然只取第一行的价格

我想要的是：

我希望总数和小计能够在 开始，将来可以改变

我希望每个总数 计算每行的价格

这是我的代码：

$（文档）.ready（函数（）{
$counter=1；
$（'table#invoiceitems'）。在（'keyup'，'上。数量，'price'，函数（）{
更新目录（本）；
});
$counter=1；
计算亚总数（）；
计算总数（）；
});
函数UpdateTotals（elem）{
//这将给出已更改元素的tr
var$container=$（elem.parent（）.parent（）；
var数量=$container.find（'.quantity'）.val（）；
var price=$（'.price'）.html（）；
var小计=parseInt（数量）*parseFloat（价格）；
$container.find（'.subtotal'）.text（subtotal.toFixed（2））；
计算总数（）；
}
函数CalculateSubTotals（）{
//当页面加载时，计算
//第一次
var lineTotals=$（'小计'）；
变量数量=$（'.quantity'）；
var price=$（'.price'）.html（）；
$。每个（行总数，函数（i）{
var tot=parseInt（$（数量[i]）.val（））*parseFloat（$（价格[i]）.val（））；
元(行总数[i]）文本(tot.toFixed(2);；
});
}
函数计算器总计（）{
//这将通过小计和
//在这里计算总数和数量
var lineTotals=$（'小计'）；
变量quantityTotal=$（'.quantity'）；
var grandTotal=0.0；
var totalQuantity=0；
$。每个（行总数，函数（i）{
grandTotal+=parseFloat（$（lineTotals[i]）.text（））；
totalQuantity+=parseInt（$（quantityTotal[i]）.val（））
});
$（'.totalquantity'）。文本（totalquantity）；
$（'.grandtotal'）.text（parseFloat（grandtotal）.toFixed（2））；
}

纸张
价格
数量
总计
小计
光面纸A5
15000
光面纸A5
20000
问题是，您已经在第
var price=$（'.price'）.html（）行中获得了price的内容那么您为什么要在这一行中获取值
$（price[i]）.val（）

没有要获取的
value
键，输入字段只有value属性。
解决方案是，

var-price=$（'.price'）

及

var tot=parseInt（$（数量[i]）.val（））*parseFloat（$（价格[i]）.text（））


$（文档）.ready（函数（）{
$counter=1；
$（'table#invoiceitems'）。在（'keyup'，'上。数量，'price'，函数（）{
更新目录（本）；
});
$counter=1；
计算亚总数（）；
计算总数（）；
});
函数UpdateTotals（elem）{
//这将给出已更改元素的tr
var$container=$（elem.parent（）.parent（）；
var数量=$container.find（'.quantity'）.val（）；
var price=$（'.price'）.html（）；
var小计=parseInt（数量）*parseFloat（价格）；
$container.find（'.subtotal'）.text（subtotal.toFixed（2））；
计算总数（）；
}
函数CalculateSubTotals（）{
//当页面加载时，计算
//第一次
var lineTotals=$（'小计'）；
变量数量=$（'.quantity'）；
风险值价格=$（“.price”）；
$。每个（行总数，函数（i）{
var tot=parseInt（$（数量[i]）.val（））*parseFloat（$（价格[i]）.text（））；
元(行总数[i]）文本(tot.toFixed(2);；
});
}
函数计算器总计（）{
//这将通过小计和
//在这里计算总数和数量
var lineTotals=$（'小计'）；
变量quantityTotal=$（'.quantity'）；
var grandTotal=0.0；
var totalQuantity=0；
$。每个（行总数，函数（i）{
grandTotal+=parseFloat（$（lineTotals[i]）.text（））；
totalQuantity+=parseInt（$（quantityTotal[i]）.val（））
});
$（'.totalquantity'）。文本（totalquantity）；
$（'.grandtotal'）.text（parseFloat（grandtotal）.toFixed（2））；
}

纸张
价格
数量
总计
小计
光面纸A5
15000
光面纸A5
20000
在
计算子总计
中，
价格
是一个字符串：

所以

没有意义——它已经是一个普通的字符串了，不能在jQuery中进行有意义的包装

如果要访问单个
.price
元素，则只需使用
$（'.price'）

另外，
.price
s是
span
s，而不是输入-要获取span中的文本，应使用
.text（）
。仅使用
.val（）
从类似于输入的元素中获取文本，例如从
input
和
textarea
：

var price = $('.price');
// ...
var tot = parseInt($(quantity[i]).val()) * parseFloat($(price[i]).text());
//                                                               ^^^^^^^

需要对
UpdateTotals
函数进行相同的修复


$（文档）.ready（函数（）{
$counter=1；
$（'table#invoiceitems'）。在（'keyup'，'上。数量、.price'，函数（）{
更新目录（本）；
});
$counter=1；
计算亚总数（）；
计算总数（）；
});
函数UpdateTotals（elem）{
//这将给出已更改元素的tr
var$container=$(
$(price[i]).val()

var price = $('.price');
// ...
var tot = parseInt($(quantity[i]).val()) * parseFloat($(price[i]).text());
//                                                               ^^^^^^^