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

我创建了一个表单，您可以在其中使用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>

但是，当我使用上述函数时，虽然添加元素时的初始索引打印正确，但在删除或编辑行后再次调用该函数时，索引不会正确更新（我使用jQuery remove删除了该行）

另外，我正在使用jQuery append（）创建新的表行

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

请帮我解决同样的问题。

编辑

他的回答令我惊讶。
我不知道那个很酷的CSS特性

普拉文的回答确实更好

如果您需要在JS/jQuery代码中引用该数字。。。无法获取它，因为它是不在DOM中的伪元素。。。然后对代码的特定部分使用

.index（）

！让CSS处理其余部分

---

jQuery方式：

您需要引用行索引。。。使用该方法

然后在

.delete

上单击（我确信您可以删除该行），只需调用一个函数即可使用该方法更新行索引单元格

追加新行后相同

重要
在表行中存在的类上使用with，因为您添加了页面加载代码解析中不存在的新行。；）

这是a的陷阱。（请参阅）

函数updateRowCount（）{
$（“表tbody tr”）。每个（函数（）{
$（this.find（“.index”）.html（$（this.index（））；
});
}
//负载运行
updateRowCount（）；
$（文档）。在（“单击”、“.delete”）上，function（）{//在此处使用委派！
$（this.parents（“tr”）.remove（）；
updateRowCount（）；
});

指数
名称
财产
编辑/删除
名字
普洛通
编辑图标删除图标
名字二
Prop2
编辑图标删除图标
名字三
PropThree
编辑图标删除图标
您可以使用CSS和属性

计数器重置属性允许对元素进行自动编号

它对任何元素都有效

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


正文{
计数器重置：串行；/*将串行计数器设置为0*/
}
桌子{
边界塌陷：塌陷；
}
tr td：第一个孩子：之前{
计数器递增：串行；/*递增串行计数器*/
内容：计数器（串行）；/*显示计数器*/
}

自动序列号
第1栏
第2栏
第1栏
第2栏
第1栏
第2栏
第1栏
第2栏
第1栏
第2栏
第1栏
第2栏
第1栏
第2栏
第1栏
第2栏
第1栏
第2栏
我建议使用@pravin prajapati的CSS/计数器答案，因为它不需要JS开销，并且可以轻松扩展

我对你的代码有什么问题很感兴趣，因为我觉得它很好，所以重新构建了它。似乎工作得很好

我猜问题实际上在于将代码附加到
的方式。请单击“删除”
，尤其是在编辑后添加新行或重新创建行时

如果在初始
文档.ready
（或
窗口.onload
..）将回调附加到现有
.delete
元素之后添加新行，则它不会自动将回调附加到新的
.delete
元素

换句话说，不要在init中执行此操作：

$('.delete').on('click', function(){
  // do stuff
});

因为这只适用于
。请删除初始化期间存在的
元素。有几种方法可以解决这个问题，但一种简单的方法是侦听行父级上的单击事件，然后在运行回调之前将它们过滤到实际目标。这很容易

下面是一个将该表用作事件侦听器的示例

编辑：

如果由于某种原因，这是不可能的，您可以考虑使用
jQuery.clone（）
并将withDataAndEvents和/或deepWithDataAndEvents设置为
true
像
$（'tr.template'）.clone（true，true）。这将复制
和附加到它的任何事件处理程序（第一个“true”）以及附加到其任何子元素的任何事件处理程序（第二个“true”）


$（文档）.ready（函数（）{
//你的函数，复制100%
函数setIndex（）{
$（“td.index”）。每个（函数（索引）{
$（this）.text（++索引）；
});
}
//设置索引以开始。注意最后三个
//在示例HTML中，行索引实际上是空的
setIndex（）；
//将单击侦听器移动到表中。
$（'table'）。在（'click'，'delete'，function（）{
//拆下变速器。。。
$（this.parents（'tr'）.remove（）；
//…并重置索引
setIndex（）；
})
});
表格{
字体系列：无衬线；
利润率：10px；
}
表td{
边框：1px实心#ccc；
填充：10px；
}
.删除{
颜色：红色；
光标：指针；
字号：80%；
}

Ind
$('.delete').on('click', function(){
  // do stuff
});