Inkrementieren der Seriennummer der Zeile in JQuery

Question

Ich schreibe einen Code, um Zeilen dynamisch zu generieren. Ich habe ein Problem, dass die Zeile Nein falsch generiert wird. Das Problem besteht darin, dass die Reihe, die zuerst sichtbar ist, die Seriennummer geändert hat und andere einfach mit dem korrekten Format nach unten gehen. Bitte sagen Sie mir, was ich tun soll, um die Seriennummer korrekt zu erhalten. HTML-Code

var counter = 1; 
 
    $(function() { 
 

 
    $("#button1").click(function() { 
 
     counter++; 
 
     $('#dynamic').append($("#main-row").clone().attr("id", counter + 1)); 
 
     $("#serial").text(counter); 
 

 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="container" id="dynamic"> 
 
       <div class="row " id="main-row"> 
 
       <div class="col-sm-1 serial " id="serial">1</div> 
 
        <div class="col-sm-2 "> 
 
        <select class="container-fluid" name="select item"  id="selection"> 
 
        
 
        <option>Please select item</option> 
 
         <option value="30000" id="30000">Computer</option> 
 
         <option value="4000" id="4000">Mobile</option> 
 
         <option value="5000" id="5000">LCD</option> 
 
         <option value="1500" id="1500">Keyboard</option> 
 
         <option value="500" id="500">Mouse</option> 
 
        
 
        </select> 
 
      </div> 
 
      <div class="col-sm-2 "><input class="length quantity" type="number" min="1" name="quantity" id="quantity" required/></div> 
 
      <div class="col-sm-2 "><input class="length price " type="number" name="unitPrice" id="price1" value="" min="1" readonly/></div> 
 
      <div class="col-sm-2"><input class="length total" type="number" name="total" min="1" id="total" readonly/></div> 
 
      <button class="btn-primary col-sm-1 del ">Delete</button> 
 
     </div> 
 

 
    </div> 
 
    <div class="btn-group-vertical offset-10"> 
 
     <button class="btn btn-primary" id="button1">Add Row</button> 
 
     <button class="btn-warning" id="btnSubmit">Submit Order</button> 
 
    </div>

Answer 1

Sie müssen die ID als eindeutigen Attributwert behalten. Wenn Sie einen Inhalt klonen, werden alle ids innerhalb dieses Inhalts dupliziert. Sie hätten also keine eindeutige ids.

Ich änderte den Code und verwenden classes statt ids

var counter = 1; 
 
    $(function() { 
 

 
    $("#button1").click(function() { 
 
     counter++; 
 
     $('#dynamic').append($(".main-row:first").clone().attr("id", "row_" + counter)); 
 
     $("#row_" + counter).find(".serial").text(counter); 
 

 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="container" id="dynamic"> 
 
       <div class="row main-row"> 
 
       <div class="col-sm-1 serial">1</div> 
 
        <div class="col-sm-2 "> 
 
        <select class="container-fluid" name="select item"  id="selection"> 
 
        
 
        <option>Please select item</option> 
 
         <option value="30000">Computer</option> 
 
         <option value="4000">Mobile</option> 
 
         <option value="5000">LCD</option> 
 
         <option value="1500">Keyboard</option> 
 
         <option value="500">Mouse</option> 
 
        
 
        </select> 
 
      </div> 
 
      <div class="col-sm-2 "><input class="length quantity" type="number" min="1" name="quantity" id="quantity" required/></div> 
 
      <div class="col-sm-2 "><input class="length price " type="number" name="unitPrice" id="price1" value="" min="1" readonly/></div> 
 
      <div class="col-sm-2"><input class="length total" type="number" name="total" min="1" id="total" readonly/></div> 
 
      <button class="btn-primary col-sm-1 del ">Delete</button> 
 
     </div> 
 

 
    </div> 
 
    <div class="btn-group-vertical offset-10"> 
 
     <button class="btn btn-primary" id="button1">Add Row</button> 
 
     <button class="btn-warning" id="btnSubmit">Submit Order</button> 
 
    </div>

Answer 2

Sie können CSS-Zähler für diese

Überprüfen Sie den folgenden Code-Schnipsel

var counter = 1; 
 
$(function() { 
 

 
    $("#button1").click(function() { 
 
    counter++; 
 
    $('#dynamic').append($("#main-row").clone().attr("id", counter + 1)); 
 

 

 
    }); 
 
});

.container { 
 
    counter-reset: row; 
 
    /* Set the row counter to 0 */ 
 
} 
 

 
.container .row::before { 
 
    counter-increment: row; 
 
    /* Increment the row counter*/ 
 
    content: counter(row) ": "; 
 
    /* Display the row */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="container" id="dynamic"> 
 
    <div class="row " id="main-row"> 
 

 
    <div class="col-sm-2 "> 
 
     <select class="container-fluid" name="select item" id="selection"> 
 
        
 
        <option>Please select item</option> 
 
         <option value="30000" id="30000">Computer</option> 
 
         <option value="4000" id="4000">Mobile</option> 
 
         <option value="5000" id="5000">LCD</option> 
 
         <option value="1500" id="1500">Keyboard</option> 
 
         <option value="500" id="500">Mouse</option> 
 
        
 
        </select> 
 
    </div> 
 
    <div class="col-sm-2 "><input class="length quantity" type="number" min="1" name="quantity" id="quantity" required/></div> 
 
    <div class="col-sm-2 "><input class="length price " type="number" name="unitPrice" id="price1" value="" min="1" readonly/></div> 
 
    <div class="col-sm-2"><input class="length total" type="number" name="total" min="1" id="total" readonly/></div> 
 
    <button class="btn-primary col-sm-1 del ">Delete</button> 
 
    </div> 
 

 
</div> 
 
<div class="btn-group-vertical offset-10"> 
 
    <button class="btn btn-primary" id="button1">Add Row</button> 
 
    <button class="btn-warning" id="btnSubmit">Submit Order</button> 
 
</div>

verwenden

Hoffe es hilft

Answer 3

Ich glaube, Sie Zähler auf der Grundlage von Zeile zu container.After mit dieser Logik Code angehängt erhöhen sollen, werden als Wie unten.

$("#button1").click(function() { 
     var counter = $(".container>.row").length; 
     var next_id = counter + 1; 
     $('#dynamic').append($("#main-row").clone().attr("id", next_id)); 
     $("#"+next_id).find(".serial").text(next_id); 
});