本文详解为何直接访问 row.cells[i].value 返回 undefined，并提供规范的 DOM 访问方式、完整可运行示例及关键注意事项，帮助开发者准确获取动态生成 input 的值。
本文详解为何直接访问 `row.cells[i].value` 返回 undefined，并提供规范的 dom 访问方式、完整可运行示例及关键注意事项，帮助开发者准确获取动态生成 input 的值。
在 JavaScript 动态操作 HTML 表格时，一个常见误区是混淆 DOM 元素类型及其属性：
✅ 正确访问路径：从 cell 到 input 再到 value
你需要先定位 同时注意：innerhtml 是错误写法，正确属性名为 innerHTML（首字母大写）。但此处不应使用 innerHTML 读取 input 值——它返回的是 HTML 字符串（如 ""），而非用户输入或设置的数值。 掌握这一 DOM 层级访问逻辑，不仅能解决 undefined 问题，更能提升对 HTML 结构与 JavaScript 交互本质的理解——元素类型决定可用属性，层级关系决定访问路径。，再获取其内部的 元素，最后读取该 input 的 value。推荐使用以下任一方式（更健壮）：
的第一个子元素）
? 完整修正示例
图纸号
描述
专业
件数
长度
IBFT
备注
预算
材料
镀锌
加工3
安装3
安装4
${desc}
${prof}
${piec}
${len}
${ibft}
${obs}
`;
const tableRef = document.getElementById('myTablesecond').getElementsByTagName('tbody')[0];
const newRow = tableRef.insertRow();
newRow.innerHTML = myHtmlContent;
}
function calculateTotal() {
const table = document.getElementById("myTablesecond");
let total = 0;
// 从第1行开始（跳过表头），遍历每行
for (let i = 1; i
// ✅ 安全获取 input 的 value（兼容空值/非数字）
const input = cell.querySelector('input');
if (input) {
const val = parseFloat(input.value) || 0;
total += val;
}
}
document.getElementById('result').textContent = `总和: ${total.toFixed(2)}`;
}
⚠ 关键注意事项
中存在空格、换行或注释节点，children[0] 可能不是 。始终优先使用 querySelector('input')。
