Question

在我的代码中，当按下按钮时，它会在表格中创建一行。

我需要在每一行中，当您保留数量或价格输入时，总和会生成并分配小计中的值。

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

Answer 1

试试这个。应该是你想要的（fiddle）[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("");
    }
});

或jQuery 1.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("");
    }
});

Answer 2

如果您可以对html进行以下更改，请尝试以下代码

将班级qty添加到输入元素qtd
将班级price添加到输入元素price
将班级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("");
    }
})

演示：Fiddle

表中的jQuery sum文本输入

2 个答案: