JS实现单价乘数量算总价表格 小数仅识别整数问题求解

问题原因 #

你代码中使用的parseInt()方法仅能解析整数，会自动截断小数点后的所有内容，这是小数计算失效的核心原因，和input标签的type属性设置无关。

修复方案 #

将数值解析方法替换为支持小数的parseFloat()，同时增加小数位数控制，避免浮点运算精度异常。

修改后的核心JS代码 #

$(function () {
    $('.price,.quantity').on('keyup', function () {
        var row = $(this).closest('tr');
        // 空值、非数值内容自动转为0
        var price = parseFloat($(row).find('.price').val()) || 0;
        var quantity = parseFloat($(row).find('.quantity').val()) || 0;
        // 计算后保留2位小数，符合金额类场景的展示需求
        $(row).find('.total').val((price * quantity).toFixed(2));
    });
});

可选优化 #

如果要限制输入框仅能输入数字和小数点，可以将input的type设置为number，同时添加step="0.01"属性，示例如下：

<input type="number" step="0.01" class="price" value="1.39" />

这样可以限制输入精度为两位小数，同时移动端会唤起数字输入键盘，使用体验更好。

内容的提问来源于stack exchange，提问作者Setzi138