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

我有一个小问题，我希望有人能帮我：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>

$（文档）.ready（函数（）{
$（“#数量_1”）.keyup（函数（）{
var price_1=$（“#price_1”）.val（）；
var quantity_1=$（“#quantity_1”）.val（）；
数量=数量。替换（/[^0-9]+//g'）；
$（“数量1”）.val（数量1）；
var total_1=价格_1*数量_1；
$（“总计1”）.val（总计1.toFixed（2））；
});
});
产品
价格
量
全部的
品名
10

在此进行工作演示：

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

<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>

产品
价格
量
全部的
名字1
10
名字5
23
名字3
10
名字4
10

如果不太麻烦的话，如果它能把所有的总数加起来，并在表的末尾显示一个格兰总数，那我就太棒了：）

使用：

$(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) );
});});

更新：用于显示总计

    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);
        }

    });

---

您可以使用元素的相对位置而不是硬编码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));
    });
});

演示：

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

<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));

    });
});

品名
10
$（文档）.ready（函数（）{
$（'.quantity'）.keyup（函数（）{
var parent=$（this.recessed（“tr”）；
var price=$（“.price”，parent）.val（）；
var数量=$（“.quantity”，父）.val（）；
var总额=价格*数量；
$（.total），parent.val（toFixed（2）总计）；
});
});

我建议您使用公共类

HTML:

修改您的表格：

<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>

---

要通过jquerY添加更多行吗？此解决方案中没有总计）

$('.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));
});

<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>

$(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));
    });
});