Question

我只是想尝试运行一个javascript，为我创建一个“网格”表。这是我的代码......

<!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>

它会正确地打印掉9行中的1列......我错过了什么？

感谢。

Answer 1

你必须在y循环结束后重置y变量，否则如果退出循环，它将永远不会在第一次之后进入循环。
虽然，我建议使用for循环，因为那些更适合你的情况。

＆＃13;

<!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>

＆＃13;

<!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>

＆＃13;

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

Javascript嵌套使用Document.Write循环

1 个答案: