Javascript Nested While Loops using Document.Write

Я просто пытаюсь запустить javascript, который создаст для меня таблицу «сетки». Вот мой код ...Javascript Nested While Loops using 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>

Он будет правильно распечатать 1 колонке 9 строк ... что я упускаю ??

Спасибо.

источник

2016-12-29 Cody M.

Думаю, вам нужно сбросить y-var после выхода из y-loop. – sniels

Дайте это прочитать https://developer.mozilla.org/en-US/docs/Web/API/Document/write – NewToJS

похоже, что вы ответили на свой вопрос. если вам нужен только один столбец, вы пропускаете минус, а петли ... то есть у вас слишком много циклов ... –

Вы должны сбросить свою y-переменную после окончания y-loop, иначе она никогда не войдет в цикл после первого раза, если выйдет из цикла.
Хотя, я бы рекомендовал использовать для циклов, поскольку они более подходят для вашего случая.

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

Конечно! Спасибо! Не могу поверить, что я пропустил это. –

Не забудьте подтвердить или принять в качестве ответа, если это решит вашу проблему. – sniels

ответ

Смежные вопросы