Question

我有一个产品页面，它会在购买2的产品后输入成本，数量并吐出成本。

我已经在http://jsfiddle.net/61tch8md/找到了大部分内容（我相信），但问题是用户可以添加多行，每行只需要添加字段的数量和成本那一排。现在，当我添加其他行时，第一行将控制所有行的价格。

HTML

<table class="order-details">
    <tbody>
    <tr>
        <td><input type="text" value="" placeholder="Description of Work" class="wei-add-field description 1" name="product-1-description" /></td>
        <td><input type="text" value="" placeholder="QTY" class="wei-add-field quantity 1" name="product-1-quantity" /></td>
        <td><span class="wei-price">$</span><input type="text" value="" placeholder="Unit Price" class="wei-add-field unit-price 1" name="product-1-price"/></td>
        <td><span class="wei-price-total"></span></td>
        <td> </td>
    </tr>
    </tbody>
</table>

<div class="wei-add-service"><a href="#" class="button-secondary wei-add-service-button">Add Item</a></div>

JavaScript / Jquery

jQuery( "tr" )
  .keyup(function() {
    var value = jQuery( ".unit-price" ).val();
    var value2 = jQuery( ".quantity" ).val();
    var total = value * value2;

    jQuery( ".wei-price-total" ).text( total );
  })
  .keyup()

var counter = 2;
jQuery('a.wei-add-service-button').click(function(event){
    event.preventDefault();
    counter++;
    var newRow = jQuery('<tr><td><input type="text" value="" placeholder="Description of Work" class="wei-add-field description" name="product-' + 
        counter + '-description" /></td><td><input type="text" value="" placeholder="QTY" class="wei-add-field quantity" name="product-' + 
        counter + '-quantity" /></td><td><span class="wei-price">$</span><input type="text" value="" placeholder="Unit Price" class="wei-add-field unit-price" name="product-' + 
        counter + '-price"/></td><td><span class="wei-price-total">$49.99</span></td><td><a href="#" class="remove">remove</a></td></tr>');
    jQuery('table.order-details').append(newRow);
});


jQuery('table.order-details').on('click','tr a',function(e){
 e.preventDefault();
jQuery(this).parents('tr').remove();
});

提前致谢。

Answer 1

更改您的代码，以便选择keyup发生的行中的输入。

jQuery('table.order-details').on("keyup", "tr", function() {
    var row = jQuery(this);
    var value = jQuery( ".unit-price", row ).val();
    var value2 = jQuery( ".quantity", row ).val();
    var total = value * value2;

    jQuery( ".wei-price-total", row ).text( total );
  });

添加多个级别的输入字段

1 个答案: