js table循环滚动

<div id="scrollContainer">
  <table>
    <tr><td>内容1</td></tr>
    <tr><td>内容2</td></tr>
    <tr><td>内容3</td></tr>
    <!-- 更多行 -->
  </table>
</div>

#scrollContainer {
  width: 300px;
  height: 100px;
  overflow: hidden;
  position: relative;
}

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

td {
  padding: 10px;
  border: 1px solid #ccc;
}

function scrollTable() {
  const container = document.getElementById('scrollContainer');
  const table = container.querySelector('table');
  const rows = table.querySelectorAll('tr');
  let currentIndex = 0;

  function showNextRow() {
    rows[currentIndex].style.display = 'none';
    currentIndex = (currentIndex + 1) % rows.length;
    rows[currentIndex].style.display = '';
  }

  // 初始显示第一行
  rows[currentIndex].style.display = '';

  // 每隔一段时间滚动到下一行
  setInterval(showNextRow, 2000); // 2秒滚动一次
}

// 页面加载完成后开始滚动
window.onload = scrollTable;