Sé que cada vez que llamo "esto" dentro de la función, seleccionará cualquier selector que le haya dado en los argumentos, pero ¿cómo podría usar una plantilla literal como esta y obtener el índice de la fila generada en el método de agregar?
$(document).on('click', '.add-row', function () { $(this).closest("table").find("tbody").append(` <tr> <td> ${ $(this).closest("tr").index() } </td> </tr> `) }); <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script> </head> <body> <table class="table table-bordered"> <thead> <th>INDEX</th> <th>SOMETHING</th> <th><button class="btn btn-primary add-row">ADD ROW</button></th> </thead> <tbody></tbody> </table> </body> </html>Deberá encontrar el cuerpo y ver la cantidad de elementos secundarios de ese elemento para obtener un contador:
$(document).on('click', '.add-row', function () { var $tbody = $(this).closest("table").find("tbody"); $tbody.append(` <tr> <td> ${ $tbody.children().length } </td> </tr> `) }); <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script> </head> <body> <table class="table table-bordered"> <thead> <th>INDEX</th> <th>SOMETHING</th> <th><button class="btn btn-primary add-row">ADD ROW</button></th> </thead> <tbody></tbody> </table> </body> </html>