Javascript 自动更新金额jquery
我正在制作一个电子表格，用户可以在其中输入他们的开支，总额将自动更新。我的HTML中的数字是起始数字，我将它们设置为可编辑的，以便用户可以相应地更改它们。问题是，在可编辑版本中手动更改金额后，JQuery不再计算总额。不知道我做错了什么Javascript 自动更新金额jquery,javascript,html,jquery,Javascript,Html,Jquery,我正在制作一个电子表格，用户可以在其中输入他们的开支，总额将自动更新。我的HTML中的数字是起始数字，我将它们设置为可编辑的，以便用户可以相应地更改它们。问题是，在可编辑版本中手动更改金额后，JQuery不再计算总额。不知道我做错了什么 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script t
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type ="text/javascript">
$(document).ready(function(){
$('.quantity').each(function() {
$(calculateSum);
});
});
function calculateSum() {
var sum = 0;
$(".quantity").each(function() {
var value = $(this).text();
if(!isNaN(value) && value.length != 0) {
sum += parseFloat(value);
}
});
$('#TotalValue').text(sum);
};
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rent</td>
<td class="quantity" contentEditable="true" style = "text-align: right">400</td>
</tr>
<tr>
<td>Food</td>
<td class="quantity" contentEditable="true" style = "text-align: right">200</td>
</tr>
<tr>
<td>Entertainment</td>
<td class="quantity" contentEditable="true" style = "text-align: right">100</td>
</tr>
<tr>
<td>Transportation</td>
<td class="quantity" contentEditable="true" style = "text-align: right">50</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td id="TotalValue" style = "text-align: right"></td>
</tr>
</tfoot>
</table>
$（文档）.ready（函数（）{
$（'.quantity'）。每个（函数（）{
$（计算单位）；
});
});
函数calculateSum（）{
var总和=0；
$（“.quantity”）。每个（函数（）{
var值=$（this.text（）；
如果（！isNaN（value）&&value.length！=0）{
sum+=parseFloat（值）；
}
});
$（'#TotalValue'）。文本（总和）；
};
A.
B
租
400
食物
200
游戏娱乐
100
运输
50
全部的
$(document).ready(function(){
$('.quantity').on('keyup', function(){
calculateSum();
});
function calculateSum(){
var sum = 0;
$('.quantity').each(function(){
var val = $(this).text();
val = isNaN(val) || $.trim(val) === "" ? 0 : parseFloat(val);
sum += val;
});
$('#TotalValue').text(sum);
}
});