如何在 Javascript 中创建一个模拟 100 行和 10 列网格的嵌套循环

How do I create a nested loop that emulates a grid of 100 rows and 10 columns in Javascript?

本文关键字：行和 模拟 嵌套循环 网格 一个 Javascript 创建      更新时间：2023-09-26

我是Javascript的新手，很难解决这个问题。 这些数字最多计数 100 行，应该计数超过 10 列。 我只能让列在页面上向下计数，而不是像我想要的那样横跨。现在，列号以奇数而不是顺序读取。 我不知道我是如何导致这种情况发生的。 列号应从 1 到 10，并向下读取第 100 页行。请帮忙！非常感谢，提前！

  var RowNum = 1;
  var ColNum = 1;
  for(RowNum=1; RowNum<=100; RowNum++)
for(ColNum=1; ColNum<=10;ColNum++)
  {
  document.write("RowNum: " + RowNum + " " + "Column: " + ColNum + "</br>");
  RowNum++;
  ColNum++;
   }
   while
   (RowNum <=100);
RowNum = RowNum + 1;
   while
    (ColNum<=10);

ColNum = ColNum + 1;

for(RowNum=1; RowNum<=100; RowNum++)
for(ColNum=1; ColNum<=10;ColNum++)
{
  document.write("RowNum: " + RowNum + " " + "Column: " + ColNum + "</br>");
  //RowNum++;  remove this
  //ColNum++;  remove this
}

奇数问题是由这个"ColNum++"引起的，ColNum是一个"for"循环变量，每次都会递增，然后在同一回合中，您将它增加 1 这将使行 

document.write("RowNum: " + RowNum + " " + "Column: " + ColNum + "</br>");

仅适用于奇数

你让这个更容易 我建议你手动在HTML中生成2或3列和几行，这样你就可以看到你需要写到文档中的格式。

现在，您只是吐出 1000 行文本节点，后面有 HTML 中断，并且没有标记可以为您提供行/列数据布局。在你知道你的最终HTML标记应该是什么样子之前，你不会走得太远。

还有你在循环中递增的 RowNum 和 ColNum，这些循环已经在递增它们，所以会出现可怕的错误。看看@Mageek对两个嵌套循环做了什么，这对你来说更容易理解，但仍然会生成页面中的所有内容。

TL;DR：您的错误是将RowNum++;和ColNum++;放在for中;删除它们，它将起作用。

试试这个：

  var maxRow = 100;
  var maxCol = 10;
  for (var i = 0; i < maxRow; i++) {
      for (var j = 0; j < maxCol; j++) {
          document.write("RowNum: " + i + " " + "ColNum: " + j + "</br>");
      }
  }

因为首先，您不需要在循环中添加RowNum++;和ColNum++;，它已经在这里：for(RowNum=1; RowNum<=100; RowNum++) 。接下来，不是

while
   (RowNum <=100);
RowNum = RowNum + 1;

相当于RowNum+=100;？（但要快得多）最后，它仍然没有RowNum+=100;，因为你在一段时间后;。

实现此目的的最简单方法是使用嵌套循环。 （另一个循环中的循环） 第一个循环创建 TR 元素，而第二个循环为该行创建 TD 元素。

var rows=100;
var cols=10;
document.write("<table>");
  for (i=0; i<rows; i++) {
    document.write("<tr>");
      for (j=0; j<cols; j++) {
        document.write("<td>col"+j+"</td>");
      }
    document.write("</tr>");
  }
document.write("</table>");
相关文章：