如何在可折叠表格中一次仅显示一行，切换

<table>
  <tr id="row1">
    <td>行1的内容</td>
  </tr>
  <tr id="row2">
    <td>行2的内容</td>
  </tr>
  <tr id="row3">
    <td>行3的内容</td>
  </tr>
</table>

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

tr {
  display: none;
}

tr.active {
  display: table-row;
}

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

// 添加点击事件监听器
for (var i = 0; i < rows.length; i++) {
  rows[i].addEventListener("click", toggleRow);
}

// 切换行的显示状态
function toggleRow() {
  // 隐藏所有行
  for (var i = 0; i < rows.length; i++) {
    rows[i].classList.remove("active");
  }
  
  // 显示当前点击的行
  this.classList.add("active");
}