javascript - 使用计算结果自动填充输入字段

Question

问题并不复杂，但我无法让它工作，也不知道我是否遵循了正确的方法。

我有一个包含多行和 3 列的表格。每列都有一个数字输入字段。第 3 列必须通过将第 1 列值乘以第二个值来自动计算。

<table class="table table-striped table-bordered proposal-table" id="proposal-table">
    <thead>
        <tr>
            <th>Quantity</th>
            <th>Cost price per unit</th>
            <th>Total cost</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                @Html.EditorFor(model => model.Products[0].Quantity, new { htmlAttributes = new { @class = "form-control variable-field", @type = "number" } })
            </td>
            <td>
                @Html.EditorFor(model => model.Products[0].CostPriceUnit, new { htmlAttributes = new { @class = "form-control variable-field", @type = "number" } })
            </td>
            <td>
                @Html.EditorFor(model => model.Products[0].TotalCostPrice, new { htmlAttributes = new { @class = "form-control width-80", @type = "number" } })
            </td>
        </tr>
        <tr>
        <!-- ... -->
        </tr>
    </tbody>
</table>

我的脚本:

<script>
    $(document).ready(function () {
        //When there are changes in the input fields of the 1st or 2nd column we calculate the totalCost
        $('.variable-field').bind("change", function () {
            var currentTD = $(this).parents('tr').find('td');
            var totalCost = Number(currentTD[0].firstChild.value) * Number(currentTD[1].firstChild.value);
            //The substring is to round the number to 4 decimal places
            currentTD[2].firstChild.value = totalCost.toString().substring(0, totalCost.toString().indexOf(".") + 4);
            alert(totalCost);
        });
    });
</script>

代码上的警报显示“NaN”。

Answer 1

您使用的是 jQuery 和纯 JS 的奇怪组合，这令人困惑。

如果将通用类放在将要输入值的字段上，则可以简化逻辑。在下面的示例中，我使用了 .quantity、.costpriceunit 和 .totalcostprice。

从那里您可以轻松获取父级 tr 和 find() 中的相关字段以读取和更新它们的值。我还建议将总字段设置为只读。试试这个:

$(document).ready(function() {
  $('.variable-field').on("input", function() {
    var $row = $(this).closest('tr');
    var qty = $row.find('.quantity').val() || 0;
    var costprice = $row.find('.costpriceunit').val() || 0;
    $row.find('.totalcostprice').val(qty * costprice);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped table-bordered proposal-table" id="proposal-table">
  <thead>
    <tr>
      <th>Quantity</th>
      <th>Cost price per unit</th>
      <th>Total cost</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="number" class="form-control variable-field quantity" name="Quantity" /></td>
      <td><input type="number" class="form-control variable-field costpriceunit" name="CostPriceUnit" /></td>
      <td><input type="number" class="form-control width-80 totalcostprice" name="TotalCostPrice" readonly /></td>
    </tr>
    <tr>
      <td><input type="number" class="form-control variable-field quantity" name="Quantity" /></td>
      <td><input type="number" class="form-control variable-field costpriceunit" name="CostPriceUnit" /></td>
      <td><input type="number" class="form-control width-80 totalcostprice" name="TotalCostPrice" readonly /></td>
    </tr>
  </tbody>
</table>