title: Order dynamically created html table using JavaScript like snakes and ladders game
body: <p>I have created a table using javascript and HTML. The table has 50 cells. The cells begin at 50 and end at 1. This is what it looks like now and my code:</p>
  <p><a href="https://i.stack.imgur.com/j9PBO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/j9PBO.png" alt="Now" /></a></p>
  <p>I am creating a snakes and ladders game. So 1 needs to begin on the left bottom corner and so on like this:</p>
  <p><a href="https://i.stack.imgur.com/NnpQf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NnpQf.png" alt="Need" /></a></p>
  <p>Is there a way to do this easily or do I need to program each row myself the way I want it?</p>
  <p>This is my code so far:</p>
  <p>Html:</p>
  <pre><code>&lt;html&gt;
   &lt;head&gt;
   &lt;script&gt;
       var link = document.createElement('link');
       link.rel = 'stylesheet';
       link.type = 'text/css';
       link.href = 'style.css';
       document.getElementsByTagName('HEAD')[0].appendChild(link);
   &lt;/script&gt;
   &lt;/head&gt;
   &lt;html lang=&quot;en&quot;&gt;
  
   &lt;body&gt;
   &lt;div&gt;
       &lt;button id=&quot;selectbtn&quot; type=&quot;button&quot; &gt;Create &lt;/button&gt;
       &lt;button id=&quot;btnMove&quot; type=&quot;button&quot; &gt;move to ?&lt;/button&gt;
   &lt;/div&gt;
       &lt;div id=&quot;myDynamicTable&quot;&gt;
       &lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Script:</p>
  <pre><code>document.getElementById(&quot;selectbtn&quot;).addEventListener(&quot;click&quot;, addTable);
   function addTable() {   
   document.getElementById(&quot;selectbtn&quot;).hidden=true;
   var myTableDiv = document.getElementById(&quot;myDynamicTable&quot;);            
   var table = document.createElement('TABLE');
   table.border='1';        
   //table.className = &quot;table&quot;;
   var tableBody = document.createElement('TBODY');
   table.appendChild(tableBody);
      
   var n = 50;
   var even = true;
   
   for (var i=0; i&lt;5; i++){         
       var tr = document.createElement('TR');            
       tableBody.appendChild(tr);         
       for (var j=0; j&lt;10; j++){
           var td = document.createElement('TD');                
           td.width='75';
           td.height = '75';
           td.id = n;
           if(even){
               td.className = &quot;even&quot;
               even = false
           }
           else{
              td.className = &quot;odd&quot;  
              even = true 
           }
           var img = document.createElement('img');
           img.id = &quot;img&quot;+n;
           td.appendChild(img);
           td.appendChild(document.createTextNode(n));
           tr.appendChild(td);
           n--;            
       }
   }
   myTableDiv.appendChild(table);
  }
  </code></pre>
  <p>Thank you in advance</p>