AJAX增删表格行后如何实现行号始终从1开始按顺序连续计数

问题根因 #

1. 新增行的行号计算逻辑错误：你选择了#educationalForm下的tr数量计算新行号，但实际表格容器id是#educationalTable，额外加2的逻辑也不符合序号生成规则。
2. 删除操作的DOM操作id拼写错误：删除成功后你操作的是#educationalsTable（多了字母s），导致旧行没有被正确清空，行号计数基数错误。
3. 新增行后未统一刷新序号：直接append新行不会自动修正历史行的序号，只要有过删除操作就会出现序号断层。

修正方案 #

你代码里已经写了showEducationals()方法，这个方法本身就会拉取全量数据、按顺序生成1、2、3的连续序号，只要调整逻辑复用这个方法即可，不需要自己计算行号：

1. 修正新增提交逻辑 #

把提交成功后手动拼接append行的逻辑，换成调用showEducationals()：

$('#educationalForm').submit(function(event){
    event.preventDefault();
    var formData = new FormData($('#educationalForm')[0]);
    $.ajax({
        url:'{{ route('educational.store') }}',
        method: 'POST',
        data: formData,
        cache:false,
        contentType: false,
        processData: false,
        success:function(data){
            const variables = ['grade', 'major', 'end'];
            variables.forEach(variable => {
                if(data[variable] === null) data[variable] = '';
            });
            // 直接调用全量渲染方法，自动处理序号
            showEducationals();
            $('#educationalForm').trigger('reset');
        },
    });
});

2. 修正删除逻辑 #

删除成功后删掉拼写错误的DOM清空代码，直接调用showEducationals()即可：

$(document).on('click', '#educationalDestroy', function(event) {
    event.preventDefault();
    $.ajax({
        url:'educational/'+$(this).data('id'),
        type: 'DELETE',
        dataType: 'json',
        data: {
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            // 移除拼写错误的 $('#educationalsTable').html('') 行
            showEducationals();
        },
        error: function(response) {
            console.log(response);
        },
    });
});

可选方案：不想每次新增都请求接口的处理 #

如果你希望减少接口请求，保留手动append的逻辑，可以新增一个公共的序号刷新方法，每次增删行后调用即可：

// 新增公共方法：刷新所有行序号
function refreshRowNumbers() {
    $('#educationalTable tr').each(function(index) {
        $(this).find('td:first').text(index + 1);
    });
}

// 新增行append后调用
$('#educationalTable').append(html);
refreshRowNumbers();

// 删除行成功后也调用
// 手动删除对应行后调用refreshRowNumbers()即可，不需要重新请求接口

另外注意你代码里存在重复id的问题：新增行时给td加了id="demo"、给表单加了id="educational-destroy"，同一个页面id必须唯一，建议改成class属性，避免后续事件绑定异常。

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