Question

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

1.单位数量2.单价3.Discount rate 4.Total

我想根据字段值执行计算。当用户输入值时，我想根据在框中输入的值更新第四个字段（总计），用户不能编辑第四个字段。如果折扣率为空或该字段将被忽略。

为了澄清，只有在金额和价格字段中都有值时，才会更新总字段。如果在折扣字段中输入数字，总字段也将显示扣除折扣的总额。

不幸的是我没有任何线索，我希望能在这里提供一些帮助。

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

html如下所示，这里是jsfiddle

<div class="row">
  <div>
    <input class="form-control" id="num-of-prods-1" type="text" placeholder="Number of units">
  </div>
  <div>
    <input class="form-control" id="prod-unit-price-1" type="text" placeholder="Unit price">
  </div>
  <div>
    <input class="form-control" id="discount-rate-1" type="text" placeholder="Discount rate %">
  </div>
  <div>
    <input class="form-control" id="order-amount-1" type="text" placeholder="Total">
  </div>
</div>

<div class="row">
  <div>
    <input class="form-control" id="num-of-prods-2" type="text" placeholder="Number of units">
  </div>
  <div>
    <input class="form-control" id="prod-unit-price-2" type="text" placeholder="Unit price">
  </div>
  <div>
    <input class="form-control" id="discount-rate-2" type="text" placeholder="Discount rate %">
  </div>
  <div>
    <input class="form-control" id="order-amount-2" type="text" placeholder="Total">
  </div>
</div>

Answer 1

简化了html，删除了ID，添加了类，并在disabled上设置了.total属性。这些操作已经完成，因此可以处理更多行而无需分配新的ID，因此可以每行触发计算，因此用户不能编辑总数，但会保留输入字段。

<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工作：

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));
    }
});

使用的JavaScript为计算设置了一个功能，允许设置或选择折扣率。

在设置之后，我们可以在输入更改时随时设置jQuery调用。一旦它出现，我们会将行更改为scope，并在找到每个字段时使用它进行过滤。

if语句检查units和price是否存在数字，以及折扣率是数字还是空数。如果符合这些条件，则会将.total的内容替换为calculation的结果。

请参阅http://jsfiddle.net/RtN4e/6/

根据评论进行编辑

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('');
    }
});

这包含Luxelin建议的折扣计算以及一组简化限制，如果超出范围，则删除任何折扣，并将.parent()更改为.closest()以允许换行{每个输入上的{1}}元素。

Answer 2

您将要使用keyup，parseFloat（以获取带小数的数字）和isNaN来检查它是否为数字。

    $(".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”之类的内容，并使用.data方法进行检查。

尝试一下：http://jsfiddle.net/Zyneak/AGAj8/

Answer 3

你可以查看小提琴：http://jsfiddle.net/RtN4e/3/

$('#inputFormID').blur(function(e) {
    var txtVal = parseFloat($(this).val());
    $('#outputF').val(txtVal);
});

因为您希望能够以编程方式添加更多行，所以您只需要在输入标记中包含类并将该类连接到id引用。

对文本输入值执行计算

3 个答案: