使用Ajax和JQuery遍历后端数据后表格编辑按钮多生成一个的问题求助

嗨，我看了你的代码，问题出在按钮元素的处理逻辑上，咱们一步步拆解分析：

问题根源 #

你在循环外部只创建了一次buttonEdit元素，然后每次循环里执行buttonEdit.appendTo($('td.action'))——这里的$('td.action')会选中页面上所有已存在的.action单元格。JQuery的appendTo方法如果目标是多个元素，会自动克隆当前元素到每个目标里，这就导致每多一次循环，按钮数量会跟着累加，最终出现比数据行数多的情况。

举个直观的例子：

• 第一次循环：创建第1行的.action单元格，此时页面只有1个.action，按钮被添加进去，当前有1个按钮；
• 第二次循环：创建第2行的.action单元格，此时页面有2个.action，appendTo会把按钮克隆到这两个单元格，当前就有2个按钮；
• 以此类推，循环n次后，最后一次操作会把按钮克隆到n个单元格里，最终按钮总数就会超出预期。

修复方案 #

有两种简单的修复方式，选哪种都可以：

方式一：每次循环创建独立的按钮元素

把按钮的创建逻辑放到$.each循环内部，让每一行都拥有自己独立的按钮：

$.each(dataResponse[0], function (index, value) {
    // 每次循环都创建新的按钮实例
    var buttonEdit = $('<button type="button" class="editDoc" data-bs-toggle="modal" data-bs-target="#form-editDoc"><i class="fa-solid fa-pen text-dark"></i></button>');
    var buttonDelete = $('<button type="button" class="deleteDoc" href=""><i class="fa-solid fa-trash-can text-danger"></i></button>');

    $('<tr>').appendTo($('#tableDoctor > tbody'))
        .append($('<th scope="row">').text(index + 1))
        .append($('<td>').text(value.name))
        .append($('<td>').text(value.mail))
        .append($('<td class="action">').append(buttonEdit)); // 直接把按钮添加到当前行的action单元格
});

方式二：仅将按钮添加到当前循环的单元格

如果不想重复创建按钮，可以先存储当前行的元素，只操作当前行的.action单元格（注意要克隆按钮，否则会把同一个按钮从之前的行移到新行）：

$.each(dataResponse[0], function (index, value) {
    // 先创建并存储当前行
    var newRow = $('<tr>').appendTo($('#tableDoctor > tbody'))
        .append($('<th scope="row">').text(index + 1))
        .append($('<td>').text(value.name))
        .append($('<td>').text(value.mail))
        .append($('<td class="action">'));
    
    // 克隆按钮并添加到当前行的action单元格
    buttonEdit.clone().appendTo(newRow.find('.action'));
});

额外小提醒 #

你给编辑按钮加了id="editDoc"，但循环生成多个按钮后，页面会出现多个相同id的元素，这不符合HTML规范。建议把id改成class（比如class="editDoc"），后续绑定事件时用class选择器即可。

备注：内容来源于stack exchange，提问作者AzedClone