动态生成表格点击删除仅能选中首个<td>元素的问题如何解决

核心问题点 #

• 页面存在重复ID：动态生成每行时，都给隐藏td设置了相同的id="timesheetDetailsID"，而原生document.getElementById()规则为只返回页面中第一个匹配ID的元素，所以不管点击哪行的删除按钮，拿到的都是第一行的ID值。
• URL拼接逻辑错误：拼接后的请求地址不需要用JSON.stringify()包裹，否则会给地址额外加上前后双引号，导致请求路径错误。
• 额外规范问题：动态生成的tr重复使用了相同的id="testDeleteTimesheet"，不符合HTML规范，可能引发其他DOM选择异常。

修复步骤 #

1. 修改动态HTML模板 #

把重复的ID替换为class，同时修正模板内的id拼接语法：

//Dynamic HTML 
const htmlTemplate = `
    <tr class="testDeleteTimesheet">
      <td>${entry.hours}</td>
      <td class="timesheetDetailsID" style="display: none;">${entry.timesheetDetailsId}</td>
      <td>${chartDate}</td>
      <td>${entry.contractCode}</td>
      <td>${entry.activityCode}</td>
      <td>${entry.otFlag}</td>
      <td>${entry.notes}</td>
      <td>
        <button id="edit-${counter}" class="btn editRow btnStyle btn-primary btn-sm"><span class="bi bi-pencil"></span></button> 
        <button id="delete-${counter}" class="btn delRow btnStyle btn-danger btn-sm"><span class="bi bi-eraser"></span></button>
      </td>
    </tr>
`;

2. 修改删除事件逻辑 #

点击删除按钮时先定位到当前行，再读取当前行的隐藏ID值：

// Function to delete entries
$("#timesheet").on('click', '.delRow', function () {
    const firstUrl = "API LINK..."
    // 定位当前点击按钮所属的行，再读取当前行的timesheetDetailsID值
    const rowId = $(this).closest('tr').find('.timesheetDetailsID').text()
    console.log(rowId)
    const settings = {
        "async": true,
        "crossDomain": true,
        "url": firstUrl + rowId, // 去掉多余的JSON.stringify
        "method": "DELETE",
        "headers": {
            "Content-Type": "application/json"
        },
        "processData": false,
        success: function () {
            alert("Yay")
            // 可选：请求成功后移除当前行，优化用户体验
            $(this).closest('tr').remove()
        },
        error: function () {
            //error handler
            alert("Boo")
        }
    };
    $.ajax(settings).done(function (response) {
        console.log(response);
    });
});

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