Question

我有一个简单的表格

<tr>
    <td> <input type="text" name="qty[]" placeholder="qty"/> </td>
    <td> <input type="text" name="price[]" placeholder="price"/> </td>
    <td> <input type="text" name="total[]" placeholder="Total"/> </td>
</tr>

我们可以有多行与上面相同。

我需要的是当用户输入qty或price行total需要更新时。

我尝试了什么

$('input[name=\'qty[]\']').on('change keyup', function(){
    var qty = $(this).val();
    var price = $(this).parent('tr').find('input[name=\'price[]\']').val();  
});

price是undefined

或者有更简单的方法吗？请查看Fiddle

更新：

.parent(..)选择当前元素集中每个元素的直接父元素。第一个参数过滤此集合。输入元素的直接父元素是td元素，而不是tr元素。

更新了Fiddle

Answer 1

首先考虑制作你的html：

<tr>
    <td> <input type="number" name="qty[]" placeholder="qty"/> </td>
    <td> <input type="number" name="price[]" placeholder="price"/> </td>
    <td> <input type="number" name="total[]" placeholder="Total"/> </td>
</tr>

另外。就javascript而言：

jQuery(document).on("change ,  keyup" , "input[name='qty[]'] , input[name='price[]']" ,function(){
     var parent_element = jQuery(this).closest("tr");
     var qty = jQuery(parent_element).find("input[name='qty[]']").val();
     var price = jQuery(parent_element).find("input[name='price[]']").val();
     if( qty.trim() != "" && price.trim() != "")
      {
        jQuery(parent_element).find("input[name='total[]']").val( parseFloat(qty) *parseFloat(price) );
      }
      else
      {
        jQuery(parent_element).find("input[name='total[]']").val("");
      }
});

编辑：更好的方法，正确考虑空白字段

Answer 2

只需将parent()更改为parents()：

演示：

https://jsfiddle.net/yqe4kwbz/9/

引自https://api.jquery.com/parents/ sbout parents()：

获取当前匹配元素集中每个元素的祖先，可选择通过选择器进行过滤。 .parents（）和.parent（）方法类似，只是后者只在DOM树上传递一个级别。

Answer 3

我不确定您是否能够更改HTML代码，但如果您认为最好将input sa class改为以下示例：

<tr>
    <td> <input class='calculate' type="number" name="qty[]" placeholder="qty"/> </td>
    <td> <input class='calculate' type="number" name="price[]" placeholder="price"/> </td>
    <td> <input class='total' type="number" name="total[]" placeholder="Total"/> </td>
</tr>

并使用class选择器获取您的值：

$('.calculate']').on('change keyup', function(){
    var qty   = parseFloat( $(this).parents('tr').find('.qte').val() );
    var price = parseFloat( $(this).parents('tr').find('.price').val() );  

    $(this).parents('tr').find('.total').val( qty * price );  
});

希望这有帮助。

Answer 4

$('input[name=\'qty[]\']').on('change keyup', function(){
    var qty = $(this).val();
    var price = $(this).closest("tr").find('input[name=\'price[]\']').val();
});

虽然此代码有效，但您必须处理大量验证。

Answer 5

.parent(..)选择当前元素集中每个元素的直接父元素。第一个参数过滤这个集合。输入元素的直接父元素是td元素，而不是tr元素。

由于您的集合中只有1个元素，因此请勿过滤。只需获取父级两次，即可选择tr元素。

$('input[name=\'qty[]\']').on('change keyup', function(){
    var qty = $(this).val();
    var price = $(this).parent().parent().find('input[name=\'price[]\']').val();  
});

使用jQuery查找父元素和最近元素

5 个答案: