添加/刪除一行，序列號增量與添加和移除

Question

>

$(document).ready(function(){ 
$(".add").click(function(){ 
$("#one").clone(true).appendTo("#mainDiv") 
.find('input[type="text"]').val('').end()}); 
$('.delete').click(function(){ 
$(this).parents("#one").remove();});}); 

http://jsfiddle.net/w69feqam/10/我這裏是

Answer 1

太多的代碼需要修改，我是刪除了你的html元素複製ids並更換成類（見演示鏈接），試試這個下面的代碼：

$(document).ready(function() { 
    $(".add").click(function() { 
    // get length for all `.one` class 
    var length = $('.one').length; 
    // cloned current parent element 
    var cloned = $(this).closest('.one').clone(true); 
    cloned.appendTo("#mainDiv").find('.sno').val(length + 1); 
    }); 
    $('.delete').click(function() { 
    $(this).parents(".one").remove(); 
    }); 
}); 

$(document).on('keyup', '.quantity, .net_rate', function() { 
var parent = $(this).closest('.one'); 
// calling function 
calculate(parent); 
}); 

// calculate total and grand total when enter value inside quantity and net field 
function calculate(e){ 
    var q = +$(e).find('.quantity').val(); 
    var n = +$(e).find('.net_rate').val(); 
    var sum = 0; 
    $(e).find('.total').val(q*n); 
    $('.total').each(function(i,e){ 
    sum += +$(e).val();   
    }); 
    $('#Grand').val(sum); 
}; 

DEMO

Answer 2

進行函數調用到每添加和刪除類似下面的復位輸入數字。

DEMO

function resetNumber() { 
    $('.row .s1 input').each(function() { 
     console.log($(this)); 
     $(this).val($('.row').index($(this).closest('.row')) + 1) 
    }) 
} 

Answer 3

HTML

<div class="row"> 
<div class="input-field col s1"> 
    <input class="sno" type="text" name="Sr" value="1"> 
    <label for="Sr">Sr</label> 
</div> 

<div class="input-field col s2"> 
    <input id="item_code" type="text" name="item_code"> 
    <label for="item_code">Item Code</label> 
</div> 

<div class="input-field col s3"> 
    <input id="item_name" type="text" name="item_name"> 
    <label for="item_name">Item Name</label> 
</div> 

<div class="input-field col s2"> 
    <input type="text" name="quantity" id="quantity"> 
    <label for="quantity">Quantity</label> 
</div> 

<div class="input-field col s2"> 
    <input type="text" name="net_rate" id="net_rate" > 
    <label for="net_rate">Net Rate</label> 
</div> 
<div class="input-field col s2"> 
    <input type="text" name="total" id="total" > 
    <label for="total">total</label> 
</div> 
</div> 
     <br>       

<div id="mainDiv"> 
<div id="one"> 
    <div class="row"> 
     <div class="input-field col s1"> 
      <input class="sno" type="text" name="Sr" value="2" > 
      <label for="Sr">Sr</label> 
     </div> 

     <div class="input-field col s2"> 
      <input id="item_code" type="text" name="item_code" > 
      <label for="item_code">Item Code</label> 
     </div> 

     <div class="input-field col s3"> 
      <input id="item_name" type="text" name="item_name" > 
      <label for="item_name">Item Name</label> 
     </div> 

     <div class="input-field col s2"> 
      <input type="text" name="quantity" id="quantity" > 
      <label for="quantity">Quantity</label> 
     </div> 

     <div class="input-field col s2"> 
      <input type="text" name="net_rate" id="net_rate" > 
      <label for="net_rate">Net Rate</label> 
     </div> 

      <div class="input-field col s2"> 
      <input type="text" name="total" id="total" > 
      <label for="total">total</label> 
     </div> 
       <br/> 
     </div> 
     <div class="input-field col s1"> 
      <a href="#" class="btn-floating waves-effect waves-light add  ">Add<i class="mdi-content-add"></i></a> 
     </div> 

     <div class="input-field col s1"> 
      <a href="#" class="btn-floating waves-effect waves-light delete ">Remove<i class="mdi-content-clear"></i></a> 
     </div>   
</div> 
</div> 
      <div class="input-field col s2"> 
      <input type="text" name="Grand" id="Grand" > 
      <label for="net_rate">Grand Total</label> 
     </div> 
       <h5>I Want To This Paramenter </h5> 
       <h5>1. SrNo Auto Incriment Or delete To decrimrnt.<br>2.Quantity * Net rate = Total.<br>3. All Total = Grand Total </h5> 

的Javascript

$(document).ready(function(){ 
$(".add").click(function(){ 
var inserted = $("#one>div:first- child").clone(true).insertAfter("#one>div:nth-last-child(3)"); 

inserted.find('input[type="text"]').val(''); 
    inserted.children(':first').find('input[type="text"]').val($("#one>div").length-1) 

}); 
$('.delete').click(function(){ 
$("#one>div:nth-last-child(3)").remove(); 

}); 
}); 

Demo