Estoy escribiendo un código para generar filas dinámicamente. Tengo el problema de que la fila no se genera incorrectamente. El problema es que la fila que es el número de serie visible en primer lugar se cambia y otras simplemente se mueven hacia abajo con el formato correcto. Por favor, alguien me dice qué debo hacer para obtener el número de serie correctamente. El siguiente es mi código. código HTML
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>Debe mantener la identificación como un valor de atributo único. Cuando clona un contenido, todas las ids dentro de ese contenido se duplicarán. Por lo tanto, no tendría ids únicas.
Cambié su código y usé classes en lugar de 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>Puedes usar contadores css para esto
verifique el siguiente fragmento de código
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>Espero eso ayude
Creo que debería incrementar el contador en función de la fila adjunta al contenedor. Después de usar esta lógica, su código será como se muestra a continuación.
$("#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); });