这个 for 循环中的 javascript 部分是什么？答案

【问题标题】：What are the javascript parts in this for loop?这个 for 循环中的 javascript 部分是什么？
【发布时间】：2020-10-03 12:25:07
【问题描述】：

有人可以向我解释一下 for 循环的各个部分吗？

for (let i = 0; i < height; i++) {
        grid += '<tr class="row-' + i + '">';
        // loop for each cell
        for (let j = 0; j < width; j++) {
            grid += '<td class="cell" id="row-' + i + '_cell-' + j + '"></td>';
        }
        grid += '</tr>';
    }

不幸的是，我没有得到网格部分。我怎样才能以不同的方式编写它？

【问题讨论】：

不同的方式？什么不工作？在这个实现中使用了 for，因为 x 需要一个循环，而 y 需要一个循环。

标签： javascript for-loop html-table tr

【解决方案1】：

在您的代码中，网格只是使height 行数和width 行数。网格将存储此 HTML 代码，然后它可能会在某个地方使用 Html DOM 操作替换它。

这个 for 循环中的 javascript 部分是什么？

循环是 javascript 的一部分，height、width、grid 变量是 javascript 的一部分。即使您存储的 HTML 代码也是 javascript 的一部分，因为它存储在 grid 中，这只是另一个 JS 变量。

你可以参考下面的代码来看看代码到底在做什么-

<!DOCTYPE html>
<html>

<body>


  <p>This example demonstrates the <b>making a table using JS</b> method.</p>

  <p id="demo"></p>

  <script>
  //var is used to store the HTML code, height and width store the number of rows and columns of table
    var grid = "<table>",
      height = 5,
      width = 5;
    for (let i = 0; i < height; i++) {
      grid += '<tr class="row-' + i + '">';
      // loop for each cell
      for (let j = 0; j < width; j++) {
        grid += '<td class="cell" id="row-' + i + '_cell-' + j + '"> (' + i + ' , ' + j + ' ) &emsp;&emsp;  </td>';
      }
      grid += '</tr>';
    }
    grid += "</table>";
    // Below we are just replacing the HTML in p with HTML that we filled in grid
    var x = document.getElementsByTagName("p");
    document.getElementById("demo").innerHTML = grid;
  </script>

</body>

</html>

【讨论】：

【解决方案2】：

grid 变量实际上就是表格的内容。在每个 grid 行上，都会生成一个新的 HTML 元素（最后一个除外）。

对于 i 次迭代，将添加一个新行，其类名与迭代索引等效。考虑到行在表格上的垂直索引方式，height 用作 y 轴的度量。

同样，j 次迭代将一个新单元格添加到当前的“i”行中。考虑到单元格是表格中行和列的组合，width 用作 x 轴的度量。

第二个（j）循环结束后，添加结束标签</tr>，以关闭当前迭代行。

【讨论】：

【解决方案3】：

网格部分只是程序员选择的变量名。这是一个简单的嵌套 for 循环，它将生成如下所示的 html（对于 1x1 输入）

变量 i 和 j 代表它们循环的索引。

【讨论】：