Question

所以我基本上有多行格式：

<tr class="items" id="items">
    <td><input type="text" name="description[]" id="description[]" style="width:450px;" /></td>
    <td><input type="text" name="quantity[]" id="quantity[]" style="width:40px;text-align:center;" onblur="CaclulateQuantityTotal();"/></td>
    <td><input type="text" name="cost[]" id="cost[]" style="width:40px;text-align:center;" onblur="CaclulateCostTotal();"/></td>
    <td><select name="currency[]" id="currency[]"><option value="USD">USD</option><option value="CAD">CAD</option></select></td>
    <td style="text-align:right;"><input type="text" name="total[]" id="total[]" style="width:40px;text-align:center;" readonly="readonly" /></td>
    <td><a href="#" id="add_item">+</a></td>
</tr>

我基本上希望total []为（对于那一行）cost * quantity。

我的问题是我知道如何使用jquery分别遍历所有数量[]和货币[]，但我无法弄清楚如何在每行上匹配它们。

任何人都可以帮忙吗？

Answer 1

$('tr.items').each(function(i,el) {
    var $this = $(this),
        $cost = $this.find('[name="cost\\[\\]"]'),
        $quant = $this.find('[name="quantity\\[\\]"]'),
        c = parseFloat($cost.val()),
        q = parseInt($quant.val(), 10), // always use a radix
        total = c * q || 0; // default value in case of "NaN"
    $this.find('[name="total\\[\\]"]').val(total.toFixed(2));
});

http://jsfiddle.net/mblase75/AtcPc/

Answer 2

你可以遍历$（“。items”），并比较$（items [i]）。children（“。cost”）和$（items [i]）。children（“。quantity”）（of当然，你必须将它作为一个类添加到那些输入中）

类似于 -

var items = $(".items").get();

for(var i = 0; i < items.length; i++)
{
   var cost = $(items[i]).children(".cost").val() * $(items[i]).children(".quantity").val();
}

这可能不准确，但应该让你开始。

Answer 3

在HTML

的函数调用中添加对象

HTML

    <tr class="items" id="items">
        <td><input type="text" name="description[]" id="description[]" /></td>
        <td><input type="text" name="quantity[]" id="quantity[]" onblur="CaclulateQuantityTotal(this);"/></td>
        <td><input type="text" name="cost[]" id="cost[]" onblur="CaclulateCostTotal(this);"/></td>
        <td><select name="currency[]" id="currency[]"><option value="USD">USD</option><option value="CAD">CAD</option></select></td>
        <td><input type="text" name="total[]" id="total[]" readonly="readonly" /></td>
         <td><a href="#" id="add_item">+</a></td>
</tr>

的Javascript

function CaclulateQuantityTotal(obj) {
  var $tr = $(obj).closest('tr.items');
  //you now have access to the tr the function is called from, do whatever you want!
  var $q = $tr.find('input[name=quantity]'); // gives you quantity, etc...
}

Answer 4

添加一些类，这样你就可以更容易地获得这些值，而且......你不应该重复ID：）

        <tr class="items" id="items">
            <td><input type="text" name="description[]" id="description[]" style="width:450px;" /></td>
            <td><input type="text" name="quantity[]" id="quantity[]" style="width:40px;text-align:center;" onblur="CaclulateQuantityTotal();" class="quantity"/></td>
            <td><input type="text" name="cost[]" id="cost[]" style="width:40px;text-align:center;" onblur="CaclulateCostTotal();" class="cost"/></td>
            <td><select name="currency[]" id="currency[]"><option value="USD">USD</option><option value="CAD">CAD</option></select></td>
            <td style="text-align:right;"><input type="text" name="total[]" id="total[]" style="width:40px;text-align:center;" readonly="readonly" class="total"/></td>
            <td><a href="#" id="add_item">+</a></td>
        </tr>

JQuery代码：

(function () {
    $.each($('tr.items'), function(){
        var quantity = $(this).children('td').children('.quantity').val();
        var cost = $(this).children('td').children('.cost').val();
        var total = quantity*cost;
        $(this).children('td').children('.total').val(total);
    });
}());

希望它有所帮助，这是工作的DEMO：http://jsfiddle.net/MvFYd/

循环遍历表行以计算总计（数量*每行成本）

4 个答案: