如何修复 JavaScript 动态添加表格行时文本为空的问题

回顾原始代码片段：

const inputListNameText = inputListName.value; // ✅ 此时 inputListNameText 是字符串，如 "Groceries"

// ... fetch 成功后 ...
listCell.textContent = inputListNameText.value; // ❌ 错误！字符串没有 .value 属性

由于 inputListNameText 是一个原始字符串（例如 "My List"），它不具备 DOM 元素的属性，因此 inputListNameText.value 恒为 undefined，致使

✅ 正确做法是直接使用该字符串变量：

Yourware

专注于AI编程作品部署与分享的云托管平台

下载

立即学习“Java免费学习笔记（深入）”；

listCell.textContent = inputListNameText; // ✅ 正确：赋值字符串本身

此外，为提升代码健壮性与可维护性，建议补充以下最佳实践：

✅ 推荐优化后的完整函数

const saveList = () => {
  const inputListName = document.getElementById('input-list-name'); // 假设输入框 id 为 'input-list-name'
  const inputListNameText = inputListName.value.trim();

  // 防止空提交
  if (!inputListNameText) {
    alert('请输入有效的清单名称');
    return;
  }

  fetch('/api/lists', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ list_name: inputListNameText })
  })
    .then(response => {
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      return response.json();
    })
    .then(data => {
      console.log('新增成功:', data);
      console.log('插入名称:', inputListNameText);

      const tableBody = document.querySelector('#tbody');
      const newRow = document.createElement('tr');

      // 创建带复选框和文本的完整行（匹配原有结构）
      const checkboxCell = document.createElement('td');
      const checkbox = document.createElement('input');
      checkbox.type = 'checkbox';
      checkbox.className = 'todo__checkbox';
      checkboxCell.appendChild(checkbox);

      const textCell = document.createElement('td');
      textCell.className = 'text-break';
      textCell.textContent = inputListNameText; // ✅ 关键修正点

      newRow.appendChild(checkboxCell);
      newRow.appendChild(textCell);
      tableBody.appendChild(newRow);

      // 可选：清空输入框并聚焦
      inputListName.value = '';
      inputListName.focus();
    })
    .catch(err => {
      console.error('保存失败:', err);
      alert('清单添加失败，请检查网络或重试');
    });
};

⚠️ 注意事项

• 避免重复取值：inputListName.value 只需读取一次，后续直接使用变量；切勿对字符串再调 .value。
• 校验输入有效性：.trim() 可过滤首尾空格，防止仅含空格的“假输入”被提交。
• 处理异步异常：务必用 .catch() 或 try/catch（配合 async/await）捕获网络或解析错误，提升用户体验。
• 语义化结构：若原表格行含

通过以上修正与增强，不仅能立即解决“行已添加但内容为空”的问题，还能构建更可靠、易调试的前端数据同步逻辑。