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

Using the same jQuery in multiple operations

本文关键字：jQuery 操作      更新时间：2023-09-26

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

如果没有太大麻烦的话，如果它能对所有的总数求和，并在表的末尾显示一个gran总数，那我就太棒了：）

使用：

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

工作演示

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

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

我已经在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));
    });
});

我建议您使用公共类

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

修改您的表：

<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"属性，使所有"total"输入为只读。

js代码：

$(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));
    });
});
相关文章：