Jquery 如何保持序列号与动态添加/删除html表中的序列保持一致？

我有一个如下所示的表，可以使用“添加/删除”按钮添加和删除表中的行

<table class="dynatable">
    <thead>
        <tr>
            <th><button class="add">Add</button></th>
        </tr>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Col 3</th>
            <th>Col 4</th>
        </tr>
    </thead>
    <tbody>
        <tr class="prototype">
            <td><input type="text" name="id[]" value="0" class="id" /></td>
            <td><input type="text" name="name[]" value="" /></td>
            <td><input type="text" name="col4[]" value="" /></td>
            <td><input type="text" name="col3[]" value="" /></td>
        </tr>
    </tbody>
</table>

添加
身份证件
名称
第3列
第4列

表中的第一列包含序列号。但是，当删除中间的行时，它将丢失其顺序

例如，如果有5行，序列为1,2,3,4,5

如果删除序列号为3的行，序列号将丢失为1,2,4,5的顺序

但我希望第一列中的序列号在从五行中删除一行后保持1,2,3,4的顺序

如果我添加5行并删除所有行，然后再次开始添加行。序列从6开始，而不是从1开始

---

如何使用jQuery实现这一点？

您只需在编辑记录后获取结果数组，并在一个周期内设置新记录ID即可。您可以从此表中获取记录数组吗？

您只需在编辑记录后获取结果数组，并在一个周期内设置新记录ID即可。您可以从该表中获取记录数组吗？

当删除以下内容时，我会重新计算整个序列：

---

​另外，当删除某些内容只是为了减少id时，我会重新计算整个序列，当删除某些内容时，如下所示：

$(document).ready(function() {
            var id = 0;

            // Add button functionality
            $("table.dynatable button.add").click(function() {
                id++;
                var master = $(this).parents("table.dynatable");

                // Get a new row based on the prototype row
                var prot = master.find(".prototype").clone();
                prot.attr("class", id + " item")
                prot.find(".id").attr("value", id);

                master.find("tbody").append(prot);
                prot.append('<td><button class="remove">Remove</button></td>');
            });

            // Remove button functionality
            $("table.dynatable button.remove").live("click", function() {
                $(this).parents("tr").remove();
                id--; //simon was missing this now it's perfect
                recalcId();
            });
        });

function recalcId(){
    $.each($("table tr.item"),function (i,el){
        $(this).find("td:first input").val(i + 1); // Simply couse the first "prototype" is not counted in the list
    })
}
​

​另外，当删除某些内容只是为了减少

id

$（document）.ready（function（））时{
$(document).ready(function() {
            var id = 0;

            // Add button functionality
            $("table.dynatable button.add").click(function() {
                id++;
                var master = $(this).parents("table.dynatable");

                // Get a new row based on the prototype row
                var prot = master.find(".prototype").clone();
                prot.attr("class", id + " item")
                prot.find(".id").attr("value", id);

                master.find("tbody").append(prot);
                prot.append('<td><button class="remove">Remove</button></td>');
            });

            // Remove button functionality
            $("table.dynatable button.remove").live("click", function() {
                $(this).parents("tr").remove();
                id--; //simon was missing this now it's perfect
                recalcId();
            });
        });

function recalcId(){
    $.each($("table tr.item"),function (i,el){
        $(this).find("td:first input").val(i + 1); // Simply couse the first "prototype" is not counted in the list
    })
}
​

var-id=0；
//添加按钮功能
$（“table.dynatable button.add”）。单击（函数（）{
id++；
var master=$（this.parents）（“table.dynatable”）；
//基于原型行获取新行
var prot=master.find（“.prototype”）.clone（）；
保护属性（“类”，id+“项”）
prot.find（“.id”）.attr（“value”，id）；
主查找（“tbody”）。附加（prot）；
prot.append（'Remove'）；
});
//删除按钮功能
$（“table.dynatable button.remove”）.live（“单击”，函数（）{
$（this.parents（“tr”）.remove（）；
id--；//西蒙错过了这个，现在很完美
顽抗的（）；
});
});
函数顽抗（）{
$。每个（$（“表tr.item”），功能（i，el）{
$（this）.find（“td:first input”）.val（i+1）；//只是因为第一个“prototype”不在列表中
})
}
​

$（文档）.ready（函数（）{
var-id=0；
//添加按钮功能
$（“table.dynatable button.add”）。单击（函数（）{
id++；
var master=$（this.parents）（“table.dynatable”）；
//基于原型行获取新行
var prot=master.find（“.prototype”）.clone（）；
保护属性（“类”，id+“项”）
prot.find（“.id”）.attr（“value”，id）；
主查找（“tbody”）。附加（prot）；
prot.append（'Remove'）；
});
//删除按钮功能
$（“table.dynatable button.remove”）.live（“单击”，函数（）{
$（this.parents（“tr”）.remove（）；
id--；//西蒙错过了这个，现在很完美
顽抗的（）；
});
});
函数顽抗（）{
$。每个（$（“表tr.item”），功能（i，el）{
$（this）.find（“td:first input”）.val（i+1）；//只是因为第一个“prototype”不在列表中
})
}
​

我认为size（）函数在这里可能很有用。拿着你的密码，我加了一行

id = $('table.dynatable tbody tr').size() -1

。“删除按钮”功能。因此，整个JS现在是：

$(document).ready(function() {
            var id = 0;

            // Add button functionality
            $("table.dynatable button.add").click(function() {
                id++;
                var master = $(this).parents("table.dynatable");

                // Get a new row based on the prototype row
                var prot = master.find(".prototype").clone();
                prot.attr("class", id)
                prot.find(".id").attr("value", id);

                master.find("tbody").append(prot);
                prot.append('<td><button class="remove">Remove</button></td>');
            });

            // Remove button functionality
            $("table.dynatable button.remove").live("click", function() {
                $(this).parents("tr").remove();
                id = $('table.dynatable tbody tr').size() -1;
            });
        });

$（文档）.ready（函数（）{
var-id=0；
//添加按钮功能
$（“table.dynatable button.add”）。单击（函数（）{
id++；
var master=$（this.parents）（“table.dynatable”）；
//基于原型行获取新行
var prot=master.find（“.prototype”）.clone（）；
保护属性（“类”，id）
prot.find（“.id”）.attr（“value”，id）；
主查找（“tbody”）。附加（prot）；
prot.append（'Remove'）；
});
//删除按钮功能
$（“table.dynatable button.remove”）.live（“单击”，函数（）{
$（this.parents（“tr”）.remove（）；
id=$（'table.dynatable tbody tr'）.size（）-1；
});
});

我认为size（）函数在这里可能很有用。拿着你的密码，我加了一行

id = $('table.dynatable tbody tr').size() -1

。“删除按钮”功能。因此，整个JS现在是：

$(document).ready(function() {
            var id = 0;

            // Add button functionality
            $("table.dynatable button.add").click(function() {
                id++;
                var master = $(this).parents("table.dynatable");

                // Get a new row based on the prototype row
                var prot = master.find(".prototype").clone();
                prot.attr("class", id)
                prot.find(".id").attr("value", id);

                master.find("tbody").append(prot);
                prot.append('<td><button class="remove">Remove</button></td>');
            });

            // Remove button functionality
            $("table.dynatable button.remove").live("click", function() {
                $(this).parents("tr").remove();
                id = $('table.dynatable tbody tr').size() -1;
            });
        });

$（文档）.ready（函数（）{
var-id=0；
//添加按钮功能
$（“table.dynatable button.add”）。单击（函数（）{
id++；
var master=$（this.parents）（“table.dynatable”）；
//基于原型行获取新行
var prot=master.find（“.prototype”）.clone（）；
保护属性（“类”，id）
prot.find（“.id”）.attr（“value”，id）；
主查找（“tbody”）。附加（prot）；
prot.append（'Remove'）；
});
//删除按钮功能
$（“table.dynatable button.remove”）.live（“单击”，函数（）{
$（this.parents（“tr”）.remove（）；
id=$（'table.dynatable tbody tr'）.size（）-1；
});
});

ID是否可以更改，或者它始终是一个序列？即使删除了中间的行，它也应该始终保持1、2、3序列。ID是否可以更改，或者它始终是一个序列