折叠html表中的多行

<table>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
    <th>标题3</th>
  </tr>
  <tr class="foldable-row">
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
  </tr>
  <tr class="foldable-row">
    <td>内容4</td>
    <td>内容5</td>
    <td>内容6</td>
  </tr>
  <tr class="foldable-row">
    <td>内容7</td>
    <td>内容8</td>
    <td>内容9</td>
  </tr>
</table>

.foldable-row {
  display: none;
}

var foldableRows = document.getElementsByClassName('foldable-row');
for (var i = 0; i < foldableRows.length; i++) {
  var triggerElement = document.createElement('span');
  triggerElement.innerHTML = '+';
  triggerElement.classList.add('trigger');
  triggerElement.addEventListener('click', function() {
    this.classList.toggle('active');
    var row = this.parentNode.nextSibling;
    while (row && row.classList && row.classList.contains('foldable-row')) {
      row.style.display = row.style.display === 'none' ? '' : 'none';
      row = row.nextSibling;
    }
  });
  foldableRows[i].parentNode.insertBefore(triggerElement, foldableRows[i]);
}