如何在单击时展开和折叠表行

<table>
  <tr>
    <td>行1</td>
  </tr>
  <tr class="detail">
    <td>详细内容1</td>
  </tr>
  <tr>
    <td>行2</td>
  </tr>
  <tr class="detail">
    <td>详细内容2</td>
  </tr>
  <!-- 其他行和详细内容 -->
</table>

tr.detail {
  display: none;
}

// 获取所有的行元素
var rows = document.getElementsByTagName('tr');

// 遍历行元素，为每一行添加点击事件监听器
for (var i = 0; i < rows.length; i++) {
  rows[i].addEventListener('click', function() {
    // 切换下一行的详细内容的显示与隐藏
    var nextRow = this.nextElementSibling;
    if (nextRow.classList.contains('detail')) {
      if (nextRow.style.display === 'none') {
        nextRow.style.display = 'table-row';
      } else {
        nextRow.style.display = 'none';
      }
    }
  });
}