我有一个价格，电话号码和最后一个电话号码的2位数字的计算脚本。
价格将通过选择链接在我的网站上显示。价格和2位数自动显示时，我有一个小问题。当价格自动显示并输入电话号码时，“费用”列中没有自动费用，仍然为0。我必须单击“价格”列和“数字”列以显示费用。
例如，如果您在价格列中输入2000，然后输入电话号码，则数字列将自动显示，但在成本列中没有自动费用，并且仍为0。因此，您必须在价格列和数字列中单击才能显示成本。
再有一个小问题，如果我将成本列添加到像这样的文本字段中
<tr>
<td>4</td>
<td>Cost</td>
<td><input class="txt" onfocus="calculateSum()" name="sum" type="text" id="sum"></td>
</tr>带有文本字段的“成本”列中也没有自动成本。
如何在“费用”列和文本字段中显示自动费用？关于此脚本有解决方案吗？
例子 ：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>berkelilingkesemua.info</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$('#phone_number').on('keyup', function() {
$('#digits').val($(this).val().substr(-2));
});
});
</script>
<script>
$(document).ready(function(){
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function() {
$(this).keyup(function(){
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").html(sum.toFixed(0));
}
</script>
<table width="300px" border="1">
<tr>
<td width="40px">1</td>
<td>Price</td>
<td><input class="txt" onfocus="calculateSum()" name="price" type="text" id="price"></td>
</tr>
<tr>
<td>2</td>
<td>Phone Number</td>
<td><input name="phone_number" type="text" id="phone_number"></td>
</tr>
<tr>
<td>3</td>
<td>2 Digits</td>
<td><input class="txt" onfocus="calculateSum()" name="digits" type="text" id="digits"></td>
</tr>
<tr id="summation">
<td> </td>
<td align="right">Cost :</td>
<td align="center"><span id="sum">0</span></td>
</tr>
</table>
</body>
</html>您的问题不清楚。我已尽力解决您的问题。刚开始使用Web编程不是问题，但是无法向他人表达您的问题，可能会使您的问题无解。因此，请尝试使您的问题尽可能简单易懂。
我将您的jQuery代码压缩为几行，并使您的两位数字段为只读字段，以便它由代码本身计算。
$(document).ready(function() {
var price=$('#price'),
phone=$('#phone_number'),
digits=$('#digits'),
sum=$('#sum');
function calculateSum() {
var digitsVal=parseInt(phone.val().substr(-2));
digitsVal=isNaN(digitsVal)?0:digitsVal;
digits.val(digitsVal);
sum.html(parseFloat(price.val())+digitsVal);
};
phone.on('keyup', calculateSum);
price.on('keyup', calculateSum);
});<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>berkelilingkesemua.info</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<table width="300px" border="1">
<tr>
<td width="40px">1</td>
<td>Price</td>
<td><input class="txt" name="price" type="text" id="price"></td>
</tr>
<tr>
<td>2</td>
<td>Phone Number</td>
<td><input name="phone_number" type="text" id="phone_number"></td>
</tr>
<tr>
<td>3</td>
<td>2 Digits</td>
<td><input class="txt" name="digits" type="text" id="digits" readonly></td>
</tr>
<tr id="summation">
<td> </td>
<td align="right">Cost :</td>
<td align="center"><span id="sum">0</span></td>
</tr>
</table>
</body>
</html>更新：如果您需要将cost设为文本字段而不是跨度，则只需进行以下更改
$(document).ready(function() {
var price=$('#price'),
phone=$('#phone_number'),
digits=$('#digits'),
sum=$('#sum');
function calculateSum() {
var digitsVal=parseInt(phone.val().substr(-2));
digitsVal=isNaN(digitsVal)?0:digitsVal;
digits.val(digitsVal);
sum.val(parseFloat(price.val())+digitsVal);
};
phone.on('keyup', calculateSum);
price.on('keyup', calculateSum);
});<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>berkelilingkesemua.info</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<table width="300px" border="1">
<tr>
<td width="40px">1</td>
<td>Price</td>
<td><input class="txt" name="price" type="text" id="price"></td>
</tr>
<tr>
<td>2</td>
<td>Phone Number</td>
<td><input name="phone_number" type="text" id="phone_number"></td>
</tr>
<tr>
<td>3</td>
<td>2 Digits</td>
<td><input class="txt" name="digits" type="text" id="digits" readonly></td>
</tr>
<tr id="summation">
<td> </td>
<td align="right">Cost :</td>
<td align="center"><input type="text" name="sum" id="sum" value="0"></span></td>
</tr>
</table>
</body>
</html>我进行了以下更改：
sum.html(parseFloat(price.val())+digitsVal);
成为
sum.val(parseFloat(price.val())+digitsVal);
和
<td align="center"><span id="sum">0</span></td>
成为
<td align="center"><input type="text" name="sum" id="sum" value="0"></span></td>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句