1

私のコードでは、[追加]ボタンを押すと、テーブルに行が作成されます。

各行で、数量または価格の入力を残すときに、合計が小計の値を作成して割り当てる必要があります。

HTML

<table width="100%" border="0"  >
<tr>
    <td>Item</td>
    <td>Quantity</td>
    <td>U$ Price</td>
<td>Subtotal</td>
    <td>Add</td>
    <td>Remove</td>
</tr>
<tr class="tr_clone">
    <td>
        <select style="width:200px" name="itens[]">
        <option value="0"></option>
        <option value="1">Item A</option>
        <option value="2">Item B</option>
        <option value="3">Item C</option>
    </td>                                            
    <td><input type="text" size="5" maxlength="5" autofocus name="qtd[]" class="text ui-widget-content ui-corner-all"></td>
    <td><input type="text" size="10" maxlength="10" name="price[]" id="price" class="text ui-widget-content ui-corner-all"></td>
    <td><input type="text" size="10" maxlength="10" name="subtotal[]" class="text ui-widget-content ui-corner-all"></td>
    <td><input type="button" name="add" value="Add" class="tr_clone_add"></td>
    <td><input type="button" name="remove" value="Remove" class="tr_clone_remove"></td>
</tr>
</table>

jQuery

var $to_clone = $('.tr_clone').first().clone();

$("table").on('click', 'input.tr_clone_add', function () {
    var $tr    = $(this).closest('.tr_clone');
    var $clone = $to_clone.clone();
    $clone.find(':text').val('');
    $tr.after($clone);
});

$("table").on('click', 'input.tr_clone_remove', function () {
    var $tr    = $(this).closest('.tr_clone');
    $tr.remove();
});
4

2 に答える 2

1

これを試して。あなたが探しているものでなければなりません（フィドル）[http://jsfiddle.net/C6Su2/]：

HTML：

<table width="100%" border="0"  >
<tr>
    <td>Item</td>
    <td>Quantity</td>
    <td>U$ Price</td>
<td>Subtotal</td>
    <td>Add</td>
    <td>Remove</td>
</tr>
<tr class="tr_clone">
    <td>
        <select style="width:200px" name="itens[]">
        <option value="0"></option>
        <option value="1">Item A</option>
        <option value="2">Item B</option>
        <option value="3">Item C</option>
    </td>                                            
    <td><input type="text" size="5" maxlength="5" name="qtd" class="quantity text ui-widget-content ui-corner-all"></td>
    <td><input type="text" size="10" maxlength="10" name="price" class="price text ui-widget-content ui-corner-all"></td>
    <td><input type="text" size="10" maxlength="10" name="subtotal" class="subtotal text ui-widget-content ui-corner-all"></td>
    <td><input type="button" name="add" value="Add" class="tr_clone_add"></td>
    <td><input type="button" name="remove" value="Remove" class="tr_clone_remove"></td>
</tr>
</table>

jQuery 1.3+（jsfiddle）：

    var $to_clone = $('.tr_clone').first().clone();

$("table").on('click', 'input.tr_clone_add', function () {
    var $tr    = $(this).closest('.tr_clone');
    var $clone = $to_clone.clone();
    $clone.find(':text').val('');
    $tr.after($clone);
});

$("table").on('click', 'input.tr_clone_remove', function () {
    var $tr    = $(this).closest('.tr_clone');
    $tr.remove();
});
$(".quantity, .price").live("keyup", function(){
    var prtCont = $(this).parent().parent();
    var prce = parseInt(prtCont.find('.price').val()) - 0;
    var qnty = parseInt(prtCont.find('.quantity').val()) - 0;
    if(!isNaN(prce) && !isNaN(qnty)){
        prtCont.find('.subtotal').val(prce * (qnty));
    }else{
        prtCont.find('.subtotal').val("");
    }
});

またはjQuery1.9+（jsfiddle）

var $to_clone = $('.tr_clone').first().clone();

$("table").on('click', 'input.tr_clone_add', function () {
    var $tr    = $(this).closest('.tr_clone');
    var $clone = $to_clone.clone();
    $clone.find(':text').val('');
    $tr.after($clone);
});

$("table").on('click', 'input.tr_clone_remove', function () {
    var $tr    = $(this).closest('.tr_clone');
    $tr.remove();
});

$(document).on("keyup", ".quantity, .price", function(){
    var prtCont = $(this).parent().parent();
    var prce = parseInt(prtCont.find('.price').val()) - 0;
    var qnty = parseInt(prtCont.find('.quantity').val()) - 0;
    if(!isNaN(prce) && !isNaN(qnty)){
        prtCont.find('.subtotal').val(prce * (qnty));
    }else{
        prtCont.find('.subtotal').val("");
    }
});
于 2013-03-27T02:50:05.890 に答える
0

HTMLに次の変更を加えることができる場合は、以下のコードを試してください

  1. qtyクラスを入力要素に追加しますqtd
  2. priceクラスを入力要素に追加しますprice
  3. subtotalクラスを入力要素に追加しますsubtotal

コード

$('table').on('change', '.qty, .price', function(){
    var tr = $(this).closest('tr');
    var prce = parseInt($('.price', tr).val(), 10);
    var qnty = parseInt($('.qty', tr).val(), 10);
    if(!isNaN(prce) && !isNaN(qnty)){
        $('.subtotal', tr).val(prce * (qnty));
    }else{
        $('.subtotal',tr).val("");
    }
})

デモ：フィドル

于 2013-03-27T03:14:52.560 に答える