Javascript 使用 Document.Write 的嵌套 While 循环

Question

我只是想运行一个 javascript 来为我创建一个 "grid" table。这是我的代码...

<!DOCTYPE html>
<html>
<head>  
    <style>

        * {margin: 0;}

        body {width: 100%; height: 100%;}

        table {margin: 20px auto; border-collapse: collapse;}

        td {border: thin solid black; height: 5px; width: 5px;}

    </style>    
</head>

<body>      
    <table>     
        <script>

            var x = 1;
            var y = 1;

            while (x < 10) {            
                document.write("<tr>");             
                    while (y < 10) {
                        document.write("<td></td>");
                        y++;
                    }                   
                    document.write("</tr>");                    
                    x++;                
            }           

        </script>       
    </table>        
</body>

当我运行这样做时，嵌套的 WHILE 循环有效，但第一个只有运行一次给我一行 9 块。

但是，如果我注释掉嵌套循环并添加一个简单的输出使其看起来像...

<script>

        var x = 1;            

        while (x < 10) {            
            document.write("<tr>");             
            document.write("<td></td>");                     
            document.write("</tr>");                    

            x++;                
        }           

</script>

它将正确打印出 1 列 9 行...我错过了什么？？

谢谢。

Answer 1

你必须在 y 循环完成后重置你的 y 变量，否则如果退出循环，它将永远不会在第一次后进入循环。
不过，我建议使用 for 循环，因为它们更适合您的情况。

<!DOCTYPE html>
<html>

<head>
  <style>
    * {
      margin: 0;
    }
    body {
      width: 100%;
      height: 100%;
    }
    table {
      margin: 20px auto;
      border-collapse: collapse;
    }
    td {
      border: thin solid black;
      height: 5px;
      width: 5px;
    }
  </style>
</head>

<body>
  <table>
    <script>
      var x = 1;
      var y = 1;

      while (x < 10) {
        document.write("<tr>");
        while (y < 10) {
          document.write("<td></td>");
          y++;
        }
        y = 1;
        document.write("</tr>");
        x++;
      }
    </script>
  </table>
</body>

<!DOCTYPE html>
<html>

<head>
  <style>
    * {
      margin: 0;
    }
    body {
      width: 100%;
      height: 100%;
    }
    table {
      margin: 20px auto;
      border-collapse: collapse;
    }
    td {
      border: thin solid black;
      height: 5px;
      width: 5px;
    }
  </style>
</head>

<body>
  <table>
    <script>
      for (var x = 1; x < 10; x++) {
        document.write("<tr>");
        for (var y = 1; y < 10; y++) {
          document.write("<td></td>");
        }
        document.write("</tr>");
      }
    </script>
  </table>
</body>

另请注意，每次使用 document.write 方法时，浏览器都必须重新解析您的整个 DOM，这对性能不利。

Javascript 使用 Document.Write 的嵌套 While 循环

Javascript Nested While Loops using Document.Write

javascript

loops

while-loop

document.write