how to select $(this) inside a template literal js expression?-CodePudding

I know that every time I call "this" inside the function it will select whatever selector have given it in arguments but how could use template literal like this and get the index of the row generated in the append method ?

$(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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

CodePudding user response：

You'll need to find the tbody, and see the number of children of that element to get a counter:

$(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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>