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 に答える