如何用我的计算在添加删除克隆中获得正确的SrNo

Question

如何用我的计算在添加删除克隆中获得正确的SrNo

点击添加(多次)后删除一些排后再点击添加，以得到SrNo错误，我想用我的计算.

 <div id="button_pro">
    <div id='input_1' class="row">


    <div class="input-field col s1">
    <input class="sno" type="text" name="Sr_1" value="1" >
    <label for="Sr">Sr</label>
    </div>
    <div class="input-field col s2">
    <input id="item_code" type="text" name="item_code_1" value=" ">
    <label for="item_code">Item Code</label>
    </div>
    <div class="input-field col s2">
    <input id="item_name" type="text" name="item_name_1" value=" ">
    <label for="item_name">Item Name</label>
    </div>
    <div class="input-field col s1">
    <input type="text" class="quantity" name="quantity_1"  value=" ">
    <label for="quantity">Quantity</label>
    </div>
    <div class="input-field col s1">
    <input type="text" class="net_rate" name="net_rate_1"  value=" ">
    <label for="net_rate">Net Rate</label>
    </div>
    <div class="input-field col s1">
    <input type="text" class="tax" name="tax_1" value=" ">
    <label for="tax">tax</label>
    </div>
    <div class="input-field col s1">
    <input type="text"  class="Gross Rate" name="Gross Rate_1" value=" ">
    <label for="Gross Rate">Gross Rate</label>
    </div>
    <div class="input-field col s1">
    <input type="text" class="total" name="total_1" value=" " readonly>
    <label for="total">total</label>
    </div>
    <div class="input-field col s2"> <a href="#" class="btn-floating waves-effect waves-light add "><i class="mdi-content-add">Add</i></a>

    </div>

    </div>
    </div>
    <div class="row">
    <div class="input-field col s8">
    </div>
    <div class="input-field col s2">
    <input type="text" name="Grand" id="Grand" value=" ">
    <label for="net_rate">Grand Total</label>
    </div>
    </div>

    $('document').ready(function(){
    var id=2,txt_box;
    $('#button_pro').on('click','.add',function(){
    $(this).remove();
    txt_box='<div id="input_'+id+'" class="row"><div class="input-field col s1"><input type="text" name="Sr_'+id+'" value="'+id+'" ><label for="SrNo" class="active">SrNo</label></div><div class="input-field col s2"><input id="item_code" type="text" name="item_code_'+id+'"><label for="item_code" class="active">Item Code</label></div><div class="input-field col s2"><input id="item_name" type="text" name="item_name_'+id+'"><label for="item_name" class="active">Item Name</label></div><div class="input-field col s1"><input id="qty" type="text" name="quantity_'+id+'"><label for="quantity" class="active">Quantity</label></div><div class="input-field col s1"><input type="text" name="net_rate_'+id+'" ><label for="net_rate" class="active">Net Rate</label></div><div class="input-field col s1"><input type="text" name="tax_'+id+'" ><label for="tax"class="active">tax</label></div><div class="input-field col s1"><input type="text" name="Gross_Rate_'+id+'"><label for="Gross Rate" class="active">Gross Rate</label></div><div class="input-field col s1"><input type="text" name="total_'+id+'"><label for="total" class="active">total</label></div><div class="input-field col s2"><a href="#" class="btn-floating waves-effect waves-light add "><i class="mdi-content-add">Add</i></a></div><a href="#" class="btn-floating waves-effect waves-light remove "><i class="mdi-content-clear">Remove</i></a></div>';
    $("#button_pro").append(txt_box);
    id++;
    });

    $('#button_pro').on('click','.remove',function(){
    var parent=$(this).parent().prev().attr("id");
    var parent_im=$(this).parent().attr("id");
    $("#"+parent_im).slideUp('fast',function(){
    $("#"+parent_im).remove();
    if($('.add').length<1){
    $("#"+parent).append('<div class="input-field col s2"> <a href="#" class="btn-floating waves-effect waves-light add "><i class="mdi-content-add">Add</i></a></div> ');

    }
    });
    });

    });

问题的http://jsfiddle.net/p6jaxvzz/5/示例

​

Answer 1

$('#button_pro').on('click', '.remove', function () {
    var parent = $(this).parent().prev().attr("id");
    var parent_im = $(this).parent().attr("id");
    $("#" + parent_im).slideUp('fast', function () {
        $("#" + parent_im).remove();
        if ($('.add').length < 1) {
            $("#" + parent).append('<div class="input-field col s2"> <a href="#" class="btn-floating waves-effect waves-light add "><i class="mdi-content-add">Add</i></a></div> ');
        }
        var $rows = $('.row');
        $rows.each(function (i) {
            if (i < $rows.length - 1) {
                i++;
                var $inputs = $('input', this);
                $inputs.eq(0).attr('name', 'Sr_' + i).val(i);
                $inputs.eq(1).attr('name', 'item_code_' + i);
                $inputs.eq(2).attr('name', 'item_name_' + i);
                $inputs.eq(3).attr('name', 'quantity_' + i);
                $inputs.eq(4).attr('name', 'net_rate_' + i);
                $inputs.eq(5).attr('name', 'tax_' + i);
                $inputs.eq(6).attr('name', 'Gross_Rate_' + i);
                $inputs.eq(7).attr('name', 'total_' + i);
            }
        });
        id--;
    });
});

小提琴

Answer 2

这肯定对你有帮助。我也用对的元素序列进行了修改，但是它们很好--不用担心。

这里只显示两个字段，在var clone中添加rest

JSFiddle

<div class="button_pro">
    <div id='input_1' class="row">
        <div class="input-field col s1">
            <input class="sno" type="text" name="Sr_1" value="1">
            <label for="Sr">Sr</label>
        </div>
        <div class="input-field col s2">
            <input id="item_code" type="text" name="item_code_1" value=" ">
            <label for="item_code">Item Code</label>
        </div>
    </div>
</div>
<div class="row">
    <div class="input-field col s2"> 
        <a href="#" class="btn-floating waves-effect waves-light add ">
            <i class="mdi-content-add">Add</i>
        </a> 
    </div> 
    <div class="input-field col s2"> 
        <a href="#" class="btn-floating waves-effect waves-light remove ">
            <i class="mdi-content-add">Remove</i>
        </a> 
    </div>
    <div class="input-field col s8"></div>
    <div class="input-field col s2">
        <input type="text" name="Grand" id="Grand" value=" ">
        <label for="net_rate">Grand Total</label>
    </div>
</div>

JavaScript/JQuery

    $(".remove").hide();
$(function () {
    $(".add").click(function () {
        num = $(".button_pro").length;
        //alert(num);
        if(num>=1)
        {
            $(".remove").show();
        }
        incr = num + 1;
        var clone = '<div class="button_pro">';
        clone += '<div id="input_' + incr + '" class="row">';
        clone += '<div class="input-field col s1">';
        clone += '<input class="sno" type="text" name="Sr_' + incr + '" value="' + incr + '">';
        clone += '<label for="Sr">Sr</label>';
        clone += '</div>';
        clone += '<div class="input-field col s2">';
        clone += '<input id="item_code" type="text" name="item_code_' + incr + '" value=" ">'
        clone += '<label for="item_code">Item Code</label>'
        clone += '</div>';
        clone += '</div>'; 
        clone += '</div>';
        $(clone).insertBefore($(this).closest('.row'));
    }); 

     $(".remove").click(function () {
     lastnum = $(".button_pro").length;
     if(lastnum == 2)
     {
        $(".remove").hide();
     }
     $(".button_pro:nth-child(" + lastnum + ")").remove();    
     });

});