Jquery 对文本输入值执行计算

我有一个页面，可以有多行，每行有4个输入字段，如下所示

1.单位数量2.单价3.折扣率4.总计

我想根据字段值执行计算。当用户输入值时，我想根据框中输入的值更新第四个字段（总计），第四个字段不可由用户编辑。如果贴现率为空或该字段应忽略

为了澄清，只有在金额和价格字段中都有值时，才能更新总计字段。此外，如果在折扣字段中输入数字，则总额字段应显示扣除折扣的总额

不幸的是，我没有任何线索，我希望在这里得到一些帮助

页面上的行可能会有所不同，用户可以向页面添加/删除行（这已经到位）

html如下所示，下面是一个

---

您需要使用（获取带小数点的数字）并检查它是否为数字

    $(".form-control").keyup(function(e) {
   var num = parseFloat(String.fromCharCode(e.which));
    if(!isNaN(num)) {
        if(num == 0) {
             $(this).val("You entered 0!");   
        }
    }
});

如果要忽略一个文本框，请添加类似data editable=“false”的内容，并使用该方法进行检查

---

试试看：

你可以查看小提琴：

---

由于您希望能够以编程方式添加更多行，因此只需在输入标记中包含类，并将类关联到id引用。

html已简化，id已删除，类已添加，并且

已禁用
属性已设置为
.total
。这样做是为了在不必分配新ID的情况下处理更多的行，这样每行都可以触发计算，这样用户就不会编辑total，而是将其保留为一个输入字段

<div class="row">
    <input class="units" type="text" placeholder="Number of units"/>
    <input class="price" type="text" placeholder="Unit price"/>
    <input class="rate" type="text" placeholder="Discount rate %"/>
    <input class="total" type="text" placeholder="Total" disabled/>
</div>
<div class="row">
    <input class="units" type="text" placeholder="Number of units"/>
    <input class="price" type="text" placeholder="Unit price"/>
    <input class="rate" type="text" placeholder="Discount rate %"/>
    <input class="total" type="text" placeholder="Total" disabled/>
</div>

所使用的JavaScript为计算设置了一个函数，该函数允许设置或选择折扣率

设置好之后，我们可以在任何时候更改输入时设置jQuery调用。一旦找到了，我们就得到了更改为
scope
的行，并在找到每个字段时使用该行进行筛选

if
语句检查
units
和
price
是否存在数字，以及折扣率是数字还是空。如果满足这些条件，则它将用
计算结果
替换
.total
的内容

看

根据评论编辑

HTML现在是：

<div class="row">
    <div>
        <input class="units" type="text" placeholder="Number of units"/>
    </div>
    <div>
        <input class="price" type="text" placeholder="Unit price"/>
    </div>
    <div>
        <input class="rate" type="text" placeholder="Discount rate %"/>
    </div>
    <div>
        <input class="total" type="text" placeholder="Total" disabled/>
    </div>
</div>



JavaScript现在是：

function calculate(units, price, discount) {
    if (discount) {
        if (discount < 0 || discount > 100) {
            discount = 0;
        }
    } else {
        discount = 0;
    }
    return (units * price) * (1 - (discount / 100));
}

$('input').on('change', function () {
    var scope = $(this).closest('.row'),
        units = $('.units', scope).val(),
        price = $('.price', scope).val(),
        discount = $('.rate', scope).val(),
        total = $('.total', scope);
    if ($.isNumeric(units) && $.isNumeric(price) && ($.isNumeric(discount) || discount === '')) {
        total.val(calculate(units, price, discount));
    } else {
        total.val('');
    }
});

函数计算（单位、价格、折扣）{
如果（折扣）{
如果（折扣<0 | |折扣>100）{
折扣=0；
}
}否则{
折扣=0；
}
退货（单位*价格）*（1-（折扣/100））；
}
$（'input'）。在（'change'，函数（）{
var scope=$（this）.closest（'.row'），
单位=$（'.units'，范围）.val（），
价格=$（'.price'，scope）.val（），
折扣=$（'.rate'，scope）.val（），
总计=$（'.total'，范围）；
如果（$.isNumeric（单位）&&$.isNumeric（价格）&&（$.isNumeric（折扣）| |折扣==''）{
val（计算（单位、价格、折扣））；
}否则{
总计。val（“”）；
}
});

这包含了建议的折扣计算以及一组简化的限制，如果折扣超出范围，则可删除折扣，并将
.parent（）
更改为
.closest（）
，以允许在每个输入上包装
元素。
链接的小提琴不起作用，或者至少不能按预期工作，输入值后，应立即更新行上的“总计”字段。现在试试。这个也不行，在我的例子中，我在框中输入了10，所有框都说“你输入了0！”关键是我向你展示了如何编辑它们。对不起，我不知道该怎么处理它们。我希望能有一把像描述一样工作的小提琴。这把小提琴似乎不能正确处理贴现率的计算。似乎输入贴现率的值已转移到“总计”字段。如果可能的话，总字段的值不是（金额*价格-折扣）的总和，而是如果总字段不更新，除非金额和价格字段中都有值，那就太好了。这只是为了告诉您如何使用它，这取决于您如何计算折扣部分的一个问题。您希望他们能够输入，比如说，
25%
，以便该商品的价格仅为原价的75%。你的不是这样的。您应该将第二行更改为
退货单位*价格*（（折扣）？（1-折扣/100）：1）如果添加了该功能，则同时还应进行限额检查，以防止150%的折扣。我觉得OP对他们希望如何实施折扣的要求不够清楚。通过将计算函数从接口中分离出来，我对其进行了设置，以便更容易进行单元测试*(（折扣&折扣在这一点上，我可能会在返回之前设置逻辑，并检查大于或等于0和小于或等于100。您的建议是改进，但我们都在猜测OP在这一点上的想法。如果您查看它，就会发现如何修改（）
调用，以便在调用dom后处理添加到dom中的项。
function calculate(units, price, discount) {
    return units * price * ((discount) ? discount : 1);
}

$('input').on('change', function () {
    var scope = $(this).parent('.row'),
        units = $('.units', scope).val(),
        price = $('.price', scope).val(),
        discount = $('.rate', scope).val(),
        total = $('.total', scope);
    if ($.isNumeric(units) && $.isNumeric(price) && ($.isNumeric(discount) || discount === '')) {
        total.val(calculate(units, price, discount));
    }
});

<div class="row">
    <div>
        <input class="units" type="text" placeholder="Number of units"/>
    </div>
    <div>
        <input class="price" type="text" placeholder="Unit price"/>
    </div>
    <div>
        <input class="rate" type="text" placeholder="Discount rate %"/>
    </div>
    <div>
        <input class="total" type="text" placeholder="Total" disabled/>
    </div>
</div>

function calculate(units, price, discount) {
    if (discount) {
        if (discount < 0 || discount > 100) {
            discount = 0;
        }
    } else {
        discount = 0;
    }
    return (units * price) * (1 - (discount / 100));
}

$('input').on('change', function () {
    var scope = $(this).closest('.row'),
        units = $('.units', scope).val(),
        price = $('.price', scope).val(),
        discount = $('.rate', scope).val(),
        total = $('.total', scope);
    if ($.isNumeric(units) && $.isNumeric(price) && ($.isNumeric(discount) || discount === '')) {
        total.val(calculate(units, price, discount));
    } else {
        total.val('');
    }
});