如何修改动态生成表格的当前行数据？

核心问题分析 #

你的代码逻辑存在错误：.text()方法返回的是字符串，并非DOM/jQuery对象，直接给text()[0].html赋值完全不会作用到页面DOM上，自然看不到修改效果。另外你把四个字段塞进同一个<td>，也导致无法精准定位要修改的目标内容。

正确解决方案 #

第一步：优化表格行结构（推荐）

先把动态添加行的代码改成每个字段单独占一个<td>，方便后续精准定位修改：

var markup = "";
markup += '<tr>';
// 给每个字段对应的td添加类名，便于后续定位
markup += '<td class="first-name">' + result.data[0].firstName + '</td>';
markup += '<td class="last-name">' + result.data[0].lastName + '</td>';
markup += '<td class="job-title">' + result.data[0].jobTitle + '</td>';
markup += '<td class="email">' + result.data[0].email + '</td>';
markup += '<td><button type="button" class="btn btn-primary btn-sm editPersonnelBtn" data-bs-toggle="modal" data-bs-target="#editPersonnelModal" data-id = '+result.data[0].id+'> <i class="fa-solid fa-pencil fa-fw"> </i></button><button type="button" class="btn btn-primary btn-sm deletePersonnelBtn" data-bs-toggle ="modal" data-bs-target="#deletePersonnelModal" data-id= '+ result.data[0].id+'> <i class="fa-solid fa-trash fa-fw"></i> </td>';
markup += '</tr>';
$("#personnelTable").append(markup);

第二步：修改点击事件代码

现在可以精准定位到要修改的单元格，更新内容：

$(".editPersonnelBtn").on("click", function (e) {
    // 获取当前按钮所在的表格行
    const $currentRow = $(this).closest("tr");
    // 通过类名定位到第一个字段对应的单元格
    const $targetTd = $currentRow.find(".first-name");
    // 修改单元格的文本内容
    $targetTd.text("po");
    // 验证修改结果
    console.log($targetTd.text());
});

不拆分单元格的临时方案（不推荐） #

如果不想调整表格结构，只能通过字符串替换修改，但这种方法很脆弱（字段内容有重叠时容易出错）：

$(".editPersonnelBtn").on("click", function (e) {
    const $currentTd = $(this).closest("tr").find("td:first");
    let originalText = $currentTd.text();
    // 替换掉原firstName的内容，需要依赖原firstName的长度
    const newText = "po" + originalText.slice(result.data[0].firstName.length);
    $currentTd.text(newText);
});

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