如何在JavaScript模板字面量表达式中使用$(this)获取生成行索引

问题原因 #

你现有代码中的this指向的是触发点击事件的.add-row添加按钮，该按钮位于表格表头的行内，所以$(this).closest("tr")获取到的是表头行，自然无法得到新增数据行的索引。

实现方案 #

方案1：通过已有行数量计算索引（最简单）

新增行的索引等于插入前tbody已有行的长度（索引默认从0开始计数），直接计算后插入模板即可：

$(document).on('click', '.add-row', function () {
  const $tbody = $(this).closest("table").find("tbody");
  // 计算新行索引
  const newRowIndex = $tbody.children('tr').length;
  $tbody.append(`
     <tr>
       <td> ${ newRowIndex } </td>
       <td>自定义内容</td>
       <td><button class="btn btn-danger del-row">删除行</button></td>
    </tr>
  `)
});

方案2：插入后获取索引（准确性更高，适配行删除场景）

如果后续有删除行的需求，担心长度计算不准，可以先创建行元素插入到DOM后，再获取实际索引赋值：

$(document).on('click', '.add-row', function () {
  const $tbody = $(this).closest("table").find("tbody");
  // 先创建行对象
  const $newRow = $(`
     <tr>
       <td></td>
       <td>自定义内容</td>
       <td><button class="btn btn-danger del-row">删除行</button></td>
    </tr>
  `);
  // 插入到表格
  $tbody.append($newRow);
  // 获取实际索引后赋值给单元格
  $newRow.find('td:first').text($newRow.index());
});

补充：删除行后自动刷新索引

如果需要支持删除行后所有行索引自动更新，可以添加如下删除逻辑：

$(document).on('click', '.del-row', function () {
  const $currentRow = $(this).closest('tr');
  const $tbody = $currentRow.closest('tbody');
  $currentRow.remove();
  // 遍历所有行重新赋值索引
  $tbody.find('tr').each(function(index) {
    $(this).find('td:first').text(index);
  })
});

内容的提问来源于stack exchange，提问作者Vaggelis