1

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

<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[] 是（对于该行）成本 * 数量。

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

有人能帮忙吗？

4

4 回答 4

6 
$('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/

于 2012-10-23T14:43:42.473 回答
1

您可以遍历 $(".items")，并比较 $(items[i]).children(".cost") 和 $(items[i]).children(".quantity") （当然，您必须将其作为一个类添加到这些输入中）

所以像 -

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

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

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

于 2012-10-23T14:44:49.007 回答
0

在 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...
}
于 2012-10-23T14:47:11.437 回答
0

添加一些类，这样您就可以更轻松地获得这些值，而且……您不应该有重复的 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);
    });
}());

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

于 2012-10-23T14:58:09.627 回答