主页 / 问题 / 714350
Accepted
kittycat_13
Asked:2020-09-05 02:29:04 +0000 UTC2020-09-05 02:29:04 +0000 UTC

以 5 秒的间隔显示表格单元格

  • 772

你好！有一个二维矩阵。我需要将它解析成一个表格，但是每个表格单元格以 5 秒的间隔出现。

这是目前可用的：

document.write('<table>');        
for(c = 0; c<dimension; c++){
  document.write('<tr>');
    for(r = 0; r<dimension; r++){
      document.write('<td>'+ matrix[c][r] + '</td>');
    }         
  document.write('</tr>');
}
document.write('</table>');

在这里，我将矩阵的每个元素显示在一个单独的单元格中。这会产生如下表格： 车牌图像

请告诉我，我怎样才能让表格的每个单元格延迟出现？

javascript

1 个回答

  1. Best Answer
    • 添加一个表格，其中所有单元格都将为空
    • 编写一个填充下一个单元格的函数
    • 我们让这个函数每 x 秒被调用一次（使用setInterval）。
    • 当表已满时，调用clearInterval.
    • 您可以像这样更改表格单元格的内容：table.rows[индекс_строки].cells[индекс_столбца].innerHTML = новое_значение

    let size = 5;
let matrix = [];
for (let i = 0; i < size; ++i) {
  matrix[i] = [];
  for (let j = 0; j < size; ++j) {
    matrix[i][j] = i + j;
  }
}

document.write('<table>');
for (c = 0; c < size; c++) {
  document.write('<tr>');
  for (r = 0; r < size; r++) {
    document.write('<td></td>');
  }
  document.write('</tr>');
}
document.write('</table>');

let table = document.querySelector('table');
let i = 0;
let j = 0;

function addNewCell() {
  table.rows[i].cells[j].innerHTML = matrix[i][j];
  ++j;
  if (j === size) {
    j = 0;
    ++i;
  }
  if (i === size) {
    clearInterval(intervalId);
  }
}

let intervalId = setInterval(addNewCell, 100);

    • 2

相关问题