如何通过点击按钮精准更新表格中指定单元格的文本内容

以下是重构后的专业级实现方案：

✅ 推荐写法：模块化 + 事件监听器（推荐）

// 主处理函数：响应按钮点击
function addAccessory(event) {
  const row = getClickedRow(event);
  if (row) updateCellContents(row);
}

// 提取逻辑：获取触发事件的按钮所在行
function getClickedRow(event) {
  return event.target.closest('tr');
}

// 提取逻辑：批量更新指定列的单元格文本
function updateCellContents(row) {
  const tds = row.querySelectorAll('td'); // 更健壮：用 querySelectorAll 替代 getElementsByTagName
  updateCell(tds, 5, 'yumm');  // Description → 第6列（索引5）
  updateCell(tds, 8, 'cake');   // Frame → 第9列（索引8）
  updateCell(tds, 9, 'to');     // Foam → 第10列（索引9）
  updateCell(tds, 10, 'eat');   // Leg/Base → 第11列（索引10）
}

// 原子操作：安全更新单个单元格（含越界防护）
function updateCell(tds, index, value) {
  if (index >= 0 && index < tds.length) {
    tds[index].innerText = value;
  } else {
    console.warn(`⚠️ 跳过无效索引 ${index}：当前行仅有 ${tds.length} 个 <td> 元素`);
  }
}

// 统一绑定事件（推荐！替代内联 onclick）
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.edit_button').forEach(btn => {
    btn.addEventListener('click', addAccessory);
  });
});

? HTML 配合要点（关键修改）

• 移除内联 onclick="addAccessory()"，改用外部事件监听，提升可维护性与安全性；
• 确保 .edit_button 按钮位于

<td>
  <button class="edit_button" role="button">
    <i class="fa-solid fa-pen-to-square"></i>Add
  </button>
</td>

⚠️ 注意事项与最佳实践

• 永远校验 DOM 存在性：event.target.closest('tr') 可能返回 null（如点击按钮内部图标时），需判空；
• 优先使用 querySelectorAll('td')：比 getElementsByTagName('td') 返回静态 NodeList，更易预测行为；
• 避免 innerHTML 除非需渲染 HTML：纯文本更新请统一用 innerText（可读性好、防 XSS）或 textContent（性能略优、不触发重排）；
• 调试技巧：在 updateCellContents 中添加 console.log(row.querySelector('td:nth-child(1)').textContent) 快速确认目标行；
• 扩展建议：若需动态传参（如不同按钮填不同值），可将数据存于 data-* 属性中，例如 Add。

通过以上重构，你获得的不仅是一次成功的文本更新，更是一种面向行为而非位置的健壮交互模式——它让表格具备横向扩展能力，也为后续集成编辑态、表单验证或状态管理打下坚实基础。