Javascript Nested WhileループでDocument.Writeを使用する

私は単に私のための "グリッド"テーブルを作成するjavascriptを実行しようとしています。ここに私のコード... Javascript Nested WhileループでDocument.Writeを使用する

私はこれを実行する

<!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つのブロックの1行を与えて実行されます。

しかし、私は、ネストされたループをコメントアウトし、それのように見えるように、簡単な出力に追加する場合...

<script> 

     var x = 1;    

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

      x++;     
     }   

</script>

それは正しく9行の1列をプリントアウトします...私は何をしないのです??

ありがとうございました。

出典

2016-12-29 Cody M.

yループを終了した後にy-varをリセットする必要があると思います。 – sniels

これは、あなた自身の質問に答えたようにhttps://developer.mozilla.org/en-US/docs/Web/API/Document/write – NewToJS

の音を読んでください。 1つの列だけが必要な場合は、ループ中に負の値が1つ失われています...つまり、whileループが多すぎます...... –

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を、再解析する必要があることに注意してください。

出典

2016-12-29 19:47:16 sniels

もちろん！本当にありがとう！私はそれを逃したとは信じられません。 –

これがあなたの問題を解決した場合、upvote/acceptを回答として忘れないでください。 – sniels

Javascript Nested WhileループでDocument.Writeを使用する

答えて

関連する問題