本文详解如何通过 JavaScript 动态更新 HTML 尺码表中的数值，重点解决因 data-row 属性错位导致的数据映射失败问题，并提供健壮、可维护的实现方案。
本文详解如何通过 javascript 动态更新 html 尺码表中的数值，重点解决因 `data-row` 属性错位导致的数据映射失败问题，并提供健壮、可维护的实现方案。
在构建响应式服装尺码表时，支持公制（cm）与英制（inch）单位切换是常见需求。但许多开发者会遇到“数据未正确更新”或“部分单元格空白/错位”的问题——其根本原因往往不是逻辑错误，而是 HTML 结构与 JavaScript 数据索引之间的隐式耦合未对齐。
? 核心问题：data-row 属性不一致
观察原始 HTML 可发现关键缺陷：第二行
更严重的是：原始代码中 data-row 值与实际 DOM 行序脱节（例如第一行
✅ 正确实现方案
以下为修复后的完整、健壮实现（含防御性处理）：
<!-- 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），只更新 </th><td> 单元格（索引 1~9）
rowElements.forEach((cell, colIndex) => {
if (colIndex > 0 && colIndex <h3>⚠️ 关键注意事项</h3>
<ul><li>
<strong>data-row 必须严格连续且唯一</strong>：<tr> 中每个 <td> 和 </td>
<th> 的 data-row 值必须与它在 </th>
</tr>
<tbody> 中的实际行号（从 2 开始）完全一致，否则查询失败。<li>
<strong>避免硬编码列数</strong>：使用 rowValues.length 动态适配列数，而非假设固定 9 列。</li>
<li>
<strong>添加默认值与容错</strong>：生产环境建议在 rowValues[colIndex - 1] 访问前校验 rowValues[colIndex - 1] !== undefined，防止空数据导致 textContent 变为空字符串。</li>
<li>
<strong>CSS 隔离</strong>：system="METRIC" 等自定义属性无实际作用，应移除；样式控制交由 CSS 类（如 .unit-metric）完成，提升可维护性。</li>
<h3>✅ 总结</h3>
<p>动态更新尺码表的本质是<strong>建立 HTML 结构与数据数组间的可靠映射关系</strong>。修复 data-row 错位是前提，而采用基于语义化属性（data-row/data-col）的精准选择器，配合数组索引映射，能确保逻辑清晰、易于调试。此方案无需重绘 DOM，性能高效，且便于后续扩展（如增加肩宽、臀围等新行）。</p>
</tbody>
</li></ul>
</td>
