js中如何给表格数据添加自动按时滚动效果

可以使用JavaScript中的定时器和DOM操作来实现表格数据的自动按时滚动效果。

1. 首先，需要获取到需要滚动的表格元素，可以通过document.getElementById()或document.querySelector()等方法获取到。

2. 然后，需要获取到表格中的数据，并将其以数组的形式保存下来。

3. 接着，可以使用定时器setInterval()，每隔一定时间（比如1000毫秒）将数组中的数据向上滚动一行，并更新表格的内容。

4. 在滚动时，需要注意边界问题，当滚动到最后一行时，需要将滚动回到第一行。

下面是一个示例代码：

HTML:

<table id="scroll-table">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1-1</td>
      <td>Data 1-2</td>
      <td>Data 1-3</td>
    </tr>
    <tr>
      <td>Data 2-1</td>
      <td>Data 2-2</td>
      <td>Data 2-3</td>
    </tr>
    <tr>
      <td>Data 3-1</td>
      <td>Data 3-2</td>
      <td>Data 3-3</td>
    </tr>
    <tr>
      <td>Data 4-1</td>
      <td>Data 4-2</td>
      <td>Data 4-3</td>
    </tr>
  </tbody>
</table>

JavaScript:

var table = document.getElementById('scroll-table');
var data = Array.from(table.getElementsByTagName('td'));
var row = table.getElementsByTagName('tr')[0].cloneNode(true);
var currentIndex = 0;
var intervalId = setInterval(scrollTable, 1000);

function scrollTable() {
  currentIndex++;
  if (currentIndex >= data.length) {
    currentIndex = 0;
  }
  var nextRow = row.cloneNode(true);
  nextRow.innerHTML = data[currentIndex].parentNode.innerHTML;
  table.tBodies[0].removeChild(table.tBodies[0].firstChild);
  table.tBodies[0].appendChild(nextRow);
}

这段代码会每隔1秒钟将表格数据向上滚动一行，并且当滚动到最后一行时会自动回到第一行。可以根据具体需求调整滚动时间和滚动行数。