Question

我的HTML和Javascript代码有问题。我想生成一个适合屏幕宽度的网格。

在浏览器中运行代码时，有两个问题：

第一个问题是浏览器向我附加到表元素的每个字符串添加Counter CNT 1 1 2 2 1 1 3 1 1。

下一个问题是，由于某种原因，浏览器不会费心执行我最后使用的<tbody></tbody>命令，它只会为表格的2个单元格着色，然后停止，但是应该这样做无限地为表着色。

有人可以向我指出我的代码在做什么错吗？我知道我的代码没有经过优化，我只是一个初学者。无需帮助我对其进行优化，但是我只想知道为什么它没有达到我上面描述的目的。

到目前为止，我有以下代码：

setInterval(AnimateGrid(cellArray), 1000);

Answer 1

您不应使用innerHTML。

浏览器将尝试清理“损坏的” html，因为它不知道您按顺序输入的行。

使用所有html构建一个字符串，然后将其附加到表中

类似这样：

let html = ''; 
html += "<tr>";
for (var i = 1; i <= cellamount; i++) {
   html += "<td id="+i+"></td>";
 }
html += "</tr><tr>";
 for (var i = cellamount + 1; i <= cellamount * 2; i++) {
 html += "<td id="+i+"></td>";
 }
html += "</tr><tr>";
 for (var i = 2 * cellamount; i <= cellamount * 3; i++) {
 html += "<td id="+i+"></td>";
 }
html += "</tr>";


// and then add the string to HTML
// `.append()` inside your table
table.appendChild(html)


return cellamount * 3;
}

更新

第二期

代替此

setInterval(AnimateGrid(cellArray), 1000);

尝试

setInterval(function() {AnimateGrid(cellArray)}, 1000);

Answer 2

对于tbody问题，我建议您手动添加您的tbody并附加到此。

<table>
  <tbody id="table">

  </tbody>
</table>

对于setInterval的问题，请查看控制台中是否有错误。它应该列出发生问题的所有地方。如果没有错误，请不要忘记console.log（）的实用程序。您可以使用它在代码中放置点以查看其是否正在执行。这样一来，您就可以查明引起问题的确切路线。

Answer 3

尝试用缓冲区替换table.innerHTML +=构造。喜欢

let tableContent = "";
tableContent += "<tr>";
// fill all the data
table.innerHTML = tableContent;

这可能会解决这两个问题

Javascript自动添加到附加字符串

3 个答案: