Javascript - Append values in a sizing chart

Problem:

I created a sizing chart using HTML and CSS. The user can select the units of measurement in the chart and there is a selection for this. I have written a javascript to append the values based on the selected measure. I thought this was fairly simple but I can’t seem to get around this. Can anyone point out the error in my approach? I am attaching part of my code below

Contents

Problem:Solution:

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 sizingTable = document.getElementById('sizing-table');
const tbody = sizingTable.querySelector('tbody');

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

  // Loop through the table rows and update the cells with new values
  for (let row = 0; row < data.length; row++) {
    const cells = tbody.querySelectorAll(`[data-row="${row + 2}"]`);
    for (let col = 1; col < cells.length; col++) { // Start at 1 to skip the header cell
      cells[col].textContent = data[row][col - 1];
    }
  }
});

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

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

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

Solution:

Some of the row numbers are incorrect in your HTML. Check row 2. Here is a snippet with that issue fixed.

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 sizingTable = document.getElementById('sizing-table');
const tbody = sizingTable.querySelector('tbody');

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

  // Loop through the table rows and update the cells with new values
  for (let row = 0; row < data.length; row++) {
    const cells = tbody.querySelectorAll(`[data-row="${row + 2}"]`);
    for (let col = 1; col < cells.length; col++) { // Start at 1 to skip the header cell
      cells[col].textContent = data[row][col - 1];
    }
  }
});

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

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

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