使用添加和删除添加/删除带有序列号增量的行

Question

＆GT;

$(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

进行函数调用以在每次添加和删除时重置输入数字，如下所示。

<强> DEMO

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

Answer 2

需要修改的代码太多，我已删除了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 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