Question

我有一个小问题，希望有人能帮助我：D

我正在尝试创建一个产品表，其中用户只需添加产品数量，jquery将乘法值与其值相乘并得出结果

我已经做到了，而且效果很好：

    <script>
$(document).ready(function(){           
    $('#quantity_1').keyup(function(){   
    var price_1 = $("#price_1").val();
    var quantity_1 = $("#quantity_1").val();
    quantity_1 = quantity_1.replace(/[^0-9]+/g, '');
    $("#quantity_1").val(quantity_1);
    var total_1 = price_1 * quantity_1;
    $( "#total_1" ).val( total_1.toFixed(2) );
    });
});
</script>

        <table border="1" cellpadding="5px" cellspacing="0" >
        <tr>
        <td>Product</td>
        <td>Price</td>
        <td>Quantity</td>
        <td>Total</td>
      </tr>
    <tr>
        <td>Product Name</td>
        <td><input type="hidden" name="product[1][price]" id="price_1" value="10.00"  />10.00</td>
        <td><input type="text" name="product[1][quantity]" id="quantity_1"  /></td>
        <td><input type="text" name="product[1][total]" id="total_1" value="0" /></td>
      </tr>
    </table>

这里的工作演示： http://jsfiddle.net/EnterateNorte/9kswL0gf/

但我希望能够添加多行，如下所示：

<table border="1" cellpadding="5px" cellspacing="0" >
    <tr>
    <td>Product</td>
    <td>Price</td>
    <td>Quantity</td>
    <td>Total</td>
  </tr>
<tr>
    <td>Name 1</td>
    <td><input type="hidden" name="product[1][price]" id="price_1" value="10.00"  />10.00</td>
    <td><input type="text" name="product[1][quantity]" id="quantity_1"  /></td>
    <td><input type="text" name="product[1][total]" id="total_1" value="0" /></td>
  </tr>
<tr>
    <td>Name 5</td>
    <td><input type="hidden" name="product[5][price]" id="price_5" value="10.00"  />23.00</td>
    <td><input type="text" name="product[5][quantity]" id="quantity_5"  /></td>
    <td><input type="text" name="product[5][total]" id="total_5" value="0" /></td>
  </tr>
<tr>
    <td>Name 3</td>
    <td><input type="hidden" name="product[3][price]" id="price_3" value="130.00"  />10.00</td>
    <td><input type="text" name="product[3][quantity]" id="quantity_3"  /></td>
    <td><input type="text" name="product[3][total]" id="total_3" value="0" /></td>
  </tr>
<tr>
    <td>Name 4</td>
    <td><input type="hidden" name="product[4][price]" id="price_4" value="12.00"  />10.00</td>
    <td><input type="text" name="product[4][quantity]" id="quantity_4"  /></td>
    <td><input type="text" name="product[4][total]" id="total_4" value="0" /></td>
  </tr>
</table>

如果它不是很麻烦的话，如果它会使所有总数相加并在表格末尾显示总数，我会很棒：）

Answer 1

使用：

$(document).ready(function(){           
   $('[name*=quantity]').keyup(function(){   
     var price = $(this).parent().prev().find('input').val();
     var quantity = $(this).val();
     var total = price * quantity;
     $(this).parent().next().find('input').val( total.toFixed(2) );
});});

<强> Working Demo

更新：显示总计

    var sum = 0;
    //iterate through each textboxes and add the values
    $('[name*=total]').each(function() {

        //add only if the value is number
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseInt(this.value);
        }

    });

<强> Working Demo

Answer 2

您可以做的是使用相对位置而不是硬编码ID来查找元素

$(document).ready(function () {
    $('input[id^="quantity_"]').keyup(function () {
        var $tr = $(this).closest('tr');
        var price = $tr.find('input[id^="price_"]').val();
        var quantity = this.value;
        var total = (price * quantity) || 0;
        $tr.find('input[id^="total_"]').val(total.toFixed(2));
    });
});

演示：Fiddle

Answer 3

我已在Fiddle更新了您的代码。你需要稍微改变你的标记。

<tr>
    <td>Product Name</td>
    <td><input type="hidden" class="price" ... />10</td>
    <td><input type="text" class="quantity" ... /></td>
    <td><input type="text" class="total" ... /></td>
</tr>

$(document).ready(function(){           
    $('.quantity').keyup(function(){

        var parent = $(this).closest("tr");

        var price = $(".price", parent).val();
        var quantity = $(".quantity", parent).val();
        var total = price * quantity;

        $(".total", parent).val(total.toFixed(2));

    });
});

Answer 4

我建议你使用普通班级

HTML ：

<tr>
    <td>Name 5</td>
    <td>
        <input type="hidden" class="price" value="10.00" />10.00</td>
    <td>
        <input type="text" class="quantity" />
    </td>
    <td>
        <input type="text" class="total" value="0" />
    </td>
</tr>
<tr>
    <td>Name 3</td>
    <td>
        <input type="hidden" class="price" value="130.00" />130.00</td>
    <td>
        <input type="text" class="quantity" />
    </td>
    <td>
        <input type="text" class="total" value="0" />
    </td>
</tr>

脚本：

$('.quantity').keyup(function () {
    var tr = $(this).closest('tr');
    var price = tr.find('.price').val();
    var quantity = $(this).val();
    var total = price * quantity;
    tr.find('.total').val(total.toFixed(2));
});

DEMO

Answer 5

修改你的表格：

<table border="1" cellpadding="5px" cellspacing="0" id='table' >
<!-- your rows with inputs -->
    <tr>
        <td>
            <input id='totalSum' value='0' type='text' />
        </td>
    </tr>
</table>

通过添加'readonly'属性，使所有'总'输入只读。

js code：

$(document).ready(function(){           
    $('[name*=quantity]').keyup(function(){   
        var total = 0;
        $('#table tr').each(function(i,item){
            var price = parseFloat($(item).find('[name*=price]').val().replace(',','.'));
            var quantity = parseInt($(item).find('[name*=quantity]').val());
            if(!isNaN(price) && !isNan(quantity)){
                total += price*quantity;
            }
        });
        $("#totalSum").val(total.toFixed(2));
    });
});

在多个操作中使用相同的jQuery

5 个答案: