Necesito hacer un contador usando JavaScript/JQuery con el método de clonación en la segunda columna como, por ejemplo, la primera fila 1 y cuando hago clic en el botón Agregar, muestra automáticamente el número 2. Estoy usando el método de clonación en JavaScript/JQuery y no No sé cómo agregar esto. Este es mi código completo:
var cloned = $('#myTable tr:last').clone(); $(".add-row").click(function(e) { e.preventDefault(); cloned.clone().appendTo('#myTable'); }); $('#myTable').on('click', ".delete-row", function(e) { e.preventDefault(); $(this).closest('tr').remove(); }); <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table table-bordered table-hover table-striped table-sm" id="myTable"> <thead> <th></th> <th>#</th> <th>test1</th> <th>test2</th> <th>test3</th> <th>test4</th> <th>test5</th> </thead> <tbody> <tr> <td> <a href="#" class="btn btn-sm btn-danger delete-row">delete</a> </td> <td> <!-- Counter here --> </td> </tr> </tbody> </table> <a href="#" class="btn btn-sm btn-primary add-row">add</a>Considera lo siguiente.
$(function() { function cloneLastRow(table) { var row = $("tr:last", table); var clone = row.clone(); $("td:eq(1)", clone).html($("tbody tr", table).length + 1); clone.appendTo($("tbody", table)); } function renumberTable(table) { var count = 1; $("tbody tr", table).each(function(i, row) { $("td:eq(1)", row).html(count++); }); } $(".add-row").click(function() { cloneLastRow($("#myTable")); }); $("#myTable tbody").on("click", ".delete-row", function() { var row = $(this).closest("tr"); if (confirm("Are you sure you want to delete the Row?")) { row.fadeOut("slow", function() { row.remove(); renumberTable($("#myTable")); }); } }) }); <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table table-bordered table-hover table-striped table-sm" id="myTable"> <thead> <th> </th> <th>#</th> <th>test1</th> <th>test2</th> <th>test3</th> <th>test4</th> <th>test5</th> </thead> <tbody> <tr> <td> <a href="#" class="btn btn-sm btn-danger delete-row">delete</a> </td> <td> 1 </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </tbody> </table> <a href="#" class="btn btn-sm btn-primary add-row">add</a> No hay necesidad de un contador cuando solo puede solicitar la length actual de un selector. Por ejemplo, puede obtener la length de todas las filas en el cuerpo de la tabla. Inicialmente, eso es 1 . El próximo sería el 2 .
Ahora, si la tabla tiene un inicio único, digamos 20 , entonces desearía obtener ese valor de cadena, convertirlo en un número entero e incrementar ese valor.
$("td:eq(1)", clone).html(parseInt($("td:eq(1)", row).text()) + 1); Esto daría como resultado 21 .
Actualizar
Según su comentario, cuando elimina una fila, desea que los números permanezcan continuos. Esto significa que necesita volver a dibujar todos o al menos todos los números adicionales.
function renumberTable(table){ var count = 1; $("tbody tr", table).each(function(i, row){ $("td:eq(1)", row).html(count++); }); }Luego, ejecutaría esta función directamente después de eliminar una Fila.