如何为动态变化的表设置索引？

我创建了一个表单，您可以在其中使用 javascript 和 jQuery 添加或删除表行。我想知道如何获取和设置每个表行的索引，以便即使我从表中间删除元素也能保持顺序。该表的形式为：

<thead>
    <tr>
        <th>Index</th>
        <th>Name</th>
        <th>Property</th>
        <th>Edit/Delete</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td class="index">Index goes here (1)</td>
        <td>NameOne</td>
        <td>PropOne</td>
        <td><span class="edit">Edit Icon</span> <span class="delete">Delete Icon</span></td>
    </tr>
    <tr>
        <td class="index">2</td>
        <td>NameTwo</td>
        <td>PropTwo</td>
        <td><span class="edit">Edit Icon</span> <span class="delete">Delete Icon</span></td>
    </tr>
    <tr>
        <td class="index">3</td>
        <td>NameThree</td>
        <td>PropThree</td>
        <td><span class="edit">Edit Icon</span> <span class="delete">Delete Icon</span></td>
    </tr>
</tbody>

现在我想要实现的是，如果我要删除第二行，前第三行的索引应该自动更改为 2，如果我要添加新元素，它应该自动采用索引值 3 等等。

我试图通过以下方式实现这一目标：

function setIndex(){
   $("td.index").each(function(index) {
       $(this).text(++index);
   });
}

但是，当我使用上述函数时，尽管添加元素时的初始索引正确打印，但当我在删除或编辑行后再次调用该函数时，索引将无法正确更新（我使用 jQuery 删除删除了该行）。

我还使用 jQuery append() 创建新的表行。

我认为虽然我使用了remove()，但它们并没有被完全删除，就像我在setIndex()中使用console.log(“test”)语句一样，尽管“test”只应该打印两次(我最初有创建了 3 行并删除了其中一行）它打印了三次，表示有 3 个 tr.index。

请帮我解决同样的问题。

你可以使用CSScounter-reset https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset and content https://developer.mozilla.org/en-US/docs/Web/CSS/content特性。

计数器重置属性允许对元素进行自动编号.
它适用于任何元素。

计数器重置属性用于reset给定值的 CSS 计数器。 它将命名计数器设置为特定值。

body{
  counter-reset: Serial;           /* Set the Serial counter to 0 */
}

table{
  border-collapse: collapse;
}

tr td:first-child:before{
  counter-increment: Serial;      /* Increment the Serial counter */
  content:counter(Serial);        /* Display the counter */
}

<table border="1">
  <thead>
    <tr>
      <th>Automatic Serial number</th>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>Column 1</td>
      <td>Column 2</td>
    </tr>
    <tr>
      <td></td>
      <td>Column 1</td>
      <td>Column 2</td>
    </tr>
    <tr>
      <td></td>
      <td>Column 1</td>
      <td>Column 2</td>
    </tr>
    <tr>
      <td></td>
      <td>Column 1</td>
      <td>Column 2</td>
    </tr>
    <tr>
      <td></td>
      <td>Column 1</td>
      <td>Column 2</td>
    </tr>
    <tr>
      <td></td>
      <td>Column 1</td>
      <td>Column 2</td>
    </tr>
    <tr>
      <td></td>
      <td>Column 1</td>
      <td>Column 2</td>
    </tr>
    <tr>
      <td></td>
      <td>Column 1</td>
      <td>Column 2</td>
    </tr>
  </tbody>
</table>