本文详解如何通过 JavaScript 动态更新 HTML 尺码表中的数值，重点解决因 data-row 属性错位导致的数据映射失败问题，并提供健壮、可维护的实现方案。
本文详解如何通过 javascript 动态更新 html 尺码表中的数值，重点解决因 `data-row` 属性错位导致的数据映射失败问题，并提供健壮、可维护的实现方案。
在构建响应式服装尺码表时，支持公制（cm）与英制（inch）单位切换是常见需求。但许多开发者会遇到“数据未正确更新”或“部分单元格空白/错位”的问题——其根本原因往往不是逻辑错误，而是 HTML 结构与 JavaScript 数据索引之间的隐式耦合未对齐。
? 核心问题：data-row 属性不一致
观察原始 HTML 可发现关键缺陷：第二行 <tr> 中部分 <td> 的 data-row="3" 被错误写为 data-row="4"（如 <td data-column="4" data-row="3" class="even">81 - 89</td> 在原始代码中误标为 data-row="4"），而第三行 <tr> 的 <th> 正确使用 data-row="3"。这导致 JS 中 tbody.querySelectorAll('[data-row="2"]') 无法准确匹配全部 10 个单元格（含 <th>），进而使 cells[col] 访问越界或遗漏。
更严重的是：原始代码中 data-row 值与实际 DOM 行序脱节（例如第一行 <tr> 应统一为 data-row="2"，第二行为 data-row="3"），而 JS 循环却依赖 row + 2 精确匹配——一旦 HTML 中 data-row 错位，整个映射即失效。
✅ 正确实现方案
以下为修复后的完整、健壮实现（含防御性处理）：
<!-- HTML 结构（关键：确保 data-row 严格按 tbody 行序递增） -->
<tbody>
<tr>
<th scope="row" data-row="2">Chest (cm)</th>
<td data-row="2" data-col="1">72 - 80</td>
<td data-row="2" data-col="2">80 - 88</td>
<!-- ... 共 9 个 <td>，data-col 从 1 到 9 -->
</tr>
<tr>
<th scope="row" data-row="3">Waist (cm)</th>
<td data-row="3" data-col="1">57 - 65</td>
<td data-row="3" data-col="2">65 - 73</td>
<!-- ... -->
</tr>
</tbody>// 数据源（每行对应 tbody 中一行，每列对应该行中一个尺寸值）
const metricData = [
["72 - 80", "80 - 88", "88 - 96", "81 - 89", "89 - 97", "97 - 109", "109 - 121", "121 - 133", "133 - 145"],
["57 - 65", "65 - 73", "73 - 81", "81 - 89", "89 - 97", "97 - 109", "109 - 121", "121 - 133", "133 - 145"]
];
const imperialData = [
["10000 - 80", "80 - 88", "88 - 96", "81 - 89", "89 - 97", "97 - 109", "109 - 121", "121 - 133", "133 - 145"],
["200000 - 65", "65 - 73", "73 - 81", "81 - 89", "89 - 97", "97 - 109", "109 - 121", "121 - 133", "133 - 145"]
];
const measurementSelect = document.getElementById('measurement-select');
const tbody = document.getElementById('sizing-table').querySelector('tbody');
measurementSelect.addEventListener('change', () => {
const selected = measurementSelect.value;
const data = selected === 'METRIC' ? metricData : imperialData;
// 遍历每一行数据
data.forEach((rowValues, rowIndex) => {
const rowElements = tbody.querySelectorAll(`[data-row="${rowIndex + 2}"]`);
// 跳过 <th>（索引 0），只更新 <td> 单元格（索引 1~9）
rowElements.forEach((cell, colIndex) => {
if (colIndex > 0 && colIndex <= rowValues.length) {
cell.textContent = rowValues[colIndex - 1];
}
});
});
});⚠️ 关键注意事项
- data-row 必须严格连续且唯一：<tr> 中每个 <td> 和 <th> 的 data-row 值必须与它在 <tbody> 中的实际行号（从 2 开始）完全一致，否则查询失败。
- 避免硬编码列数：使用 rowValues.length 动态适配列数，而非假设固定 9 列。
- 添加默认值与容错：生产环境建议在 rowValues[colIndex - 1] 访问前校验 rowValues[colIndex - 1] !== undefined，防止空数据导致 textContent 变为空字符串。
- CSS 隔离：system="METRIC" 等自定义属性无实际作用，应移除；样式控制交由 CSS 类（如 .unit-metric）完成，提升可维护性。
✅ 总结
动态更新尺码表的本质是建立 HTML 结构与数据数组间的可靠映射关系。修复 data-row 错位是前提，而采用基于语义化属性（data-row/data-col）的精准选择器，配合数组索引映射，能确保逻辑清晰、易于调试。此方案无需重绘 DOM，性能高效，且便于后续扩展（如增加肩宽、臀围等新行）。
