更改下一个元素的值

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

您正在使用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); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <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> 
 
</table>

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()取值为输入设定值不分配一个。你可以检查每一个name属性反对什么开头是这样的：

小提琴：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); 
}); 

编辑：更新来处理这两个领域，没有在字段中的值，并在同一只更新领域行。您选择字段的方式将选择所有字段。你想确保你只处理同一行中的字段。