Question

我的表格中每行有三个文本字段。

<tr>
    <td><input type="text" data-type="number" name="qty[]" /></td>
    <td><input type="text" data-type="number" name="ucost[]" /></td>
    <td><input type="text" data-type="number" name="total[]" readonly /></td>
</tr>
<tr>
    <td><input type="text" data-type="number" name="qty[]" /></td>
    <td><input type="text" data-type="number" name="ucost[]" /></td>
    <td><input type="text" data-type="number" name="total[]" readonly /></td>
</tr>

每行名为total[]的文本字段的值必须为（qty * ucost）。如果用户输入qty字段的值，则必须更改相应的总字段。

如何使用name属性执行此操作？我试过这段代码，

$(document).on('keyup', "input[name='qty[]']", function(e) {
    if (e.which >= 37 && e.which <= 40) {
        e.preventDefault();
    }
    $("input[name='total[]']").val() = ($("input[name='ucost[]']").val() * $("input[name=qty[]']").val());
});

但它没有用。

Answer 1

您错误地使用了tend方法。您可以使用val()和closest()等方法。

find()

$(document).on('keyup', "input[name='qty[]'], input[name='ucost[]']", function(e) {
  if (e.which >= 37 && e.which <= 40) {
    e.preventDefault();
  }

  var qty = $(this).closest('tr').find('input[name="qty[]"]').val();
  var cost = $(this).closest('tr').find('input[name="ucost[]"]').val();
  var total = $(this).closest('tr').find('input[name="total[]"]');

  total.val(qty * cost);
});

$(document).on('keyup', "input[name='qty[]'], input[name='ucost[]']", function(e) {
  if (e.which >= 37 && e.which <= 40) {
    e.preventDefault();
  }

  var qty = $(this).closest('tr').find('input[name="qty[]"]').val();
  var cost = $(this).closest('tr').find('input[name="ucost[]"]').val();
  var total = $(this).closest('tr').find('input[name="total[]"]');

  total.val(qty * cost);
});

Answer 2

如果添加公共类，例如更好total-fields，quantity-fields等，然后使用类绑定这些事件。

<tr>
    <td><input type="text" class="quantity-fields" data-type="number" name="qty[]" /></td>
    <td><input type="text" class="cost-fields" data-type="number" name="ucost[]" /></td>
    <td><input type="text" class="total-fields" data-type="number" name="total[]" readonly /></td>
</tr>
<tr>
    <td><input type="text" class="quantity-fields" data-type="number" name="qty[]" /></td>
    <td><input type="text" class="cost-fields" data-type="number" name="ucost[]" /></td>
    <td><input type="text" class="total-fields" data-type="number" name="total[]" readonly /></td>
</tr>


$(document).on('change', ".total-fields, .quantity-fields", function(e){
  var quantity = parseFloat( $(this).parent().find('.quantity-fields').val() );
  var cost = parseFloat( $(this).parent().find('.cost-fields').val() );
  var total = cost * quantity;
  $(this).parent().find('.total-fields').val( total );
});//change

Answer 3

一个问题是.val()将值作为输入来设置不赋值的值。并且你可以检查每个名称属性与它的开头，如下所示：

小提琴：https://jsfiddle.net/oss16La2/4/

$(document).on('keyup', "input[name^=qty], input[name^=ucost]", function(e) {
    if (e.which >= 37 && e.which <= 40) {
        e.preventDefault();
    }

    // Find only fields in same row
    var row = $(this).closest('tr');
    var ucost = parseInt(row.find("input[name^=ucost]").val());
    var qty = parseInt(row.find("input[name^=qty]").val());

    // Check that both fields have a valid numerical value
    if (isNaN(ucost) || isNaN(qty)) {
        return;
    }

    // Calc product and update field in the same row
    var product = ucost * qty;
    row.find("input[name^=total]").val(product);
});

编辑：更新以处理这两个字段，在字段中没有值，只更新同一行中的字段。选择字段的方式将选择所有字段。您希望确保只处理同一行中的字段。

更改下一个元素的值

3 个答案: