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

Question

我创建了一个表单,您可以使用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 remove删除了行).

我也用jQuery append()创建新的表行.

我认为虽然我使用了remove(),但是当我在setIndex()中使用console.log("test")语句时,它们并没有被完全删除,尽管"test"只应打印两次(我最初创建了3行并删除其中一行)它打印三次,表示有3个tr.index.

请帮我解决一下.

Answer 1

您可以使用CSS counter-reset和content属性.

counter-reset属性允许自动编号元素.
它适用于任何元素.

counter-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>