title: Merge neighbouring HTML table cells with same value using JS
body: <p>I've been wrestling with this for a while. I have a table which is automatically generated based on some JSON data, which may vary. I'd like to merge neighbouring cells in the first column which have the same value, e.g. "fish" and "bird" in this table:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;fish&lt;/td&gt;
      &lt;td&gt;salmon&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;fish&lt;/td&gt;
      &lt;td&gt;cod&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;fish&lt;/td&gt;
      &lt;td&gt;plaice&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;bird&lt;/td&gt;
      &lt;td&gt;robin&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;bird&lt;/td&gt;
      &lt;td&gt;crow&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I don't want to use any libraries ideally, just pure JS.</p>
  
  <p>This is what I would like it to look like:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table, tr, td {
    border: solid 1px black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td rowspan="3"&gt;fish&lt;/td&gt;
      &lt;td&gt;salmon&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;cod&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;plaice&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td rowspan="2"&gt;bird&lt;/td&gt;
      &lt;td&gt;robin&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;crow&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've been finding different ways to identify the different values and their frequency and then change the rowspan to the right number and subsequently deleting the the other cells but these all broke down in differing use cases.</p>
  
  <p>This is what I have so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let table = document.querySelector('table');
  let rowCount = 1;
  
  for (let i = 0; i &lt; (table.rows.length - 1); i++) {
    if (table.rows[i].cells[0].innerHTML === table.rows[i + 1].cells[0].innerHTML) {
      rowCount++;
    } else if (rowCount !== 1) {
      table.rows[i].cells[0].setAttribute('rowspan', rowCount);
      for (let j = (i - rowCount + 1); j &lt; rowCount; j++) {
        table.rows[j].cells[0].remove();
      };
      rowCount = 1;
    };
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table, tr, td {
    border: solid 1px black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;fish&lt;/td&gt;
      &lt;td&gt;salmon&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;fish&lt;/td&gt;
      &lt;td&gt;cod&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;fish&lt;/td&gt;
      &lt;td&gt;plaice&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;bird&lt;/td&gt;
      &lt;td&gt;robin&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;bird&lt;/td&gt;
      &lt;td&gt;crow&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This isn't doing what I want at all but I feel I'm really close! It's trying to count the number of (first column) cells for which the one below has the same value, assigning this number to the rowspan of the last relevant cell and then deleting the subsequent cells before looping back to catch the rest of them. I'd love for my final code to be a variation of this, so can someone show me where I'm going wrong please? Thanks so much!</p>