2016-12-29 7 views
0

나는 단순히 "그리드"테이블을 만들 자바 스크립트를 실행하려고합니다. 여기에 내 코드 ... Javascript 중첩 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 개 블록의 한 행을주고 실행됩니다. 내가 ... 중첩 루프를 주석과 같은 보이게하는 간단한 출력에 추가하는 경우

그러나

<script> 

     var x = 1;    

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

      x++;     
     }   

</script> 

그것은 정확하게 내가 무엇을 놓치고 ... 9 행의 1 열을 출력한다 ??

감사합니다.

+0

y- 루프를 종료 한 후에 y-var를 재설정해야한다고 생각합니다. – sniels

+1

자신의 질문에 답변 한 것처럼 https://developer.mozilla.org/en-US/docs/Web/API/Document/write – NewToJS

+0

소리를 읽으십시오. 만약 당신이 단지 하나의 열을 원한다면 당신은 네가 빠져있는 동안 루프를 잃어 버릴 것입니다 ... 말하자면, while 루프가 너무 많습니다 ...... –

답변

0

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

<!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>
또한 당신이 document.write 방법을 사용할 때마다, 브라우저 성능이 좋지 않다 전체 DOM을 재분석해야합니다 있습니다.

+0

물론! 정말 고마워! 나는 그것을 놓쳤다는 것을 믿을 수 없다. –

+0

이것이 문제를 해결하면 upvote/accept로 응답하는 것을 잊지 마십시오. – sniels