尺寸图表单位切换功能失效求助：排查JavaScript代码问题

核心错误点 #

1. HTML表格单元格data-row属性赋值错误 #

你的HTML中<tbody>内第一行（Chest行）的部分<td>标签错误使用了data-row="3"，正确值应为data-row="2"，导致JavaScript无法匹配到对应行的单元格。

错误示例：

<td data-column="4" data-row="3" class="even" system="METRIC">81 - 89</td>

正确写法：

<td data-column="4" data-row="2" class="even" system="METRIC">81 - 89</td>

整个Chest行的所有单元格（包括<th>）data-row需统一为2，Waist行的所有单元格data-row统一为3。

2. 未处理行标题的单位文本更新 #

切换单位时，行标题（如Chest (cm)）未同步更新为对应单位（Chest (inch)），缺失用户体验优化。

3. 测试数据存在无效值 #

imperialData内的数值为测试用错误值（如10000 - 80），需替换为合理的英寸范围。

修复后的完整代码 #

HTML修正 #

<div class="sizing-chart">
  <div class="toggle">
    <span>Sizing Chart</span>
    <div class="selection">
      <select class="bt-outline" id="measurement-select">
        <option value="METRIC">cm</option>
        <option value="IMPERIAL">inch</option>
      </select>
      <i id="arrowtwo" class="at"></i>
    </div>
  </div>

  <table id="sizing-table">
    <thead>
      <tr>
        <th scope="row" data-column="0" data-row="1" class="even">Size</th>
        <td data-column="1" data-row="1" class="odd">XXS</td>
        <td data-column="2" data-row="1" class="even">XS</td>
        <td data-column="3" data-row="1" class="odd">S</td>
        <td data-column="4" data-row="1" class="even">M</td>
        <td data-column="5" data-row="1" class="odd">L</td>
        <td data-column="6" data-row="1" class="even">XL</td>
        <td data-column="7" data-row="1" class="odd">2XL</td>
        <td data-column="8" data-row="1" class="even">3XL</td>
        <td data-column="9" data-row="1" class="odd">4XL</td>
      </tr>
    </thead>

    <tbody>
      <tr>
        <th scope="row" data-column="0" data-row="2" class="even">Chest (cm)</th>
        <td data-column="1" data-row="2" class="odd">72 - 80</td>
        <td data-column="2" data-row="2" class="even">80 - 88</td>
        <td data-column="3" data-row="2" class="odd">88 - 96</td>
        <td data-column="4" data-row="2" class="even">81 - 89</td>
        <td data-column="5" data-row="2" class="odd">89 - 97</td>
        <td data-column="6" data-row="2" class="even">97 - 109</td>
        <td data-column="7" data-row="2" class="odd">109 - 121</td>
        <td data-column="8" data-row="2" class="even">121 - 133</td>
        <td data-column="9" data-row="2" class="odd">133 - 145</td>
      </tr>
      <tr>
        <th scope="row" data-column="0" data-row="3" class="even">Waist (cm)</th>
        <td data-column="1" data-row="3" class="odd">57 - 65</td>
        <td data-column="2" data-row="3" class="even">65 - 73</td>
        <td data-column="3" data-row="3" class="odd">73 - 81</td>
        <td data-column="4" data-row="3" class="even">81 - 89</td>
        <td data-column="5" data-row="3" class="odd">89 - 97</td>
        <td data-column="6" data-row="3" class="even">97 - 109</td>
        <td data-column="7" data-row="3" class="odd">109 - 121</td>
        <td data-column="8" data-row="3" class="even">121 - 133</td>
        <td data-column="9" data-row="3" class="odd">133 - 145</td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript修正 #

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 = [
  ["28 - 31", "31 - 34", "34 - 38", "32 - 35", "35 - 38", "38 - 43", "43 - 48", "48 - 52", "52 - 57"],
  ["22 - 25", "25 - 29", "29 - 32", "32 - 35", "35 - 38", "38 - 43", "43 - 48", "48 - 52", "52 - 57"]
];

const measurementSelect = document.getElementById('measurement-select');
const sizingTable = document.getElementById('sizing-table');
const tbody = sizingTable.querySelector('tbody');

measurementSelect.addEventListener('change', function() {
  const selectedOption = measurementSelect.value;
  const data = selectedOption === 'METRIC' ? metricData : imperialData;
  const unit = selectedOption === 'METRIC' ? 'cm' : 'inch';

  // 更新行标题单位
  const rowHeaders = tbody.querySelectorAll('th[data-column="0"]');
  rowHeaders[0].textContent = `Chest (${unit})`;
  rowHeaders[1].textContent = `Waist (${unit})`;

  // 更新表格数值
  for (let row = 0; row < data.length; row++) {
    const cells = tbody.querySelectorAll(`[data-row="${row + 2}"]`);
    // 从第1个元素开始，跳过th
    for (let col = 1; col < cells.length; col++) {
      // 防止数据索引越界
      if (col - 1 < data[row].length) {
        cells[col].textContent = data[row][col - 1];
      }
    }
  }
});

CSS保持不变 #

table {
  border-collapse: collapse;
  width: 100%;
}

.toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

额外说明 #

• 增加了数据索引越界校验，避免因数据长度不匹配导致的报错。
• 替换了imperialData中的无效测试值，使用合理的英寸范围。

内容的提问来源于stack exchange，提问作者user22546916