title: Onclick event to put an image from a table to another table. Javascript, HTML
body: <p>I have two tables. One table contains several images and the other one is empty.
  What I want is that clicking on one of the images from the first table will take that image and put it on the other table enlarging its size. </p>
  
  <p>This is how my tables look like:</p>
  
  <pre><code>&lt;div&gt;
          &lt;table id="enlarged" width="530px" border="1"&gt;
              &lt;tr&gt;
                  &lt;th&gt;Enlarged Picture.&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;div id="div1"&gt; &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;   
      &lt;/div&gt;
  
      &lt;br/&gt;
      &lt;div&gt;
          &lt;table id="small" width="530px" border="1"&gt;
              &lt;tr&gt;
                  &lt;th&gt;Click on picture to see it enlarged.&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;img id="picture1" src="winter.jpg" style="height:100px; width:100px; align:left;" onclick="addPictureToTable();"&gt;
                      &lt;img id="picture2" src="winter1.jpg" style="height:100px; width:100px; align:left;" onclick="addPictureToTable();"&gt;
                      &lt;img id="picture3" src="winter2.jpg" style="height:100px; width:100px; align:left;" onclick="addPictureToTable();"&gt;
                      &lt;img id="picture4" src="winter3.jpg" style="height:100px; width:100px; align:left;" onclick="addPictureToTable();"&gt;
                      &lt;img id="picture5" src="winter4.jpg" style="height:100px; width:100px; align:left;" onclick="addPictureToTable();"&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>What i've tried:</p>
  
  <pre><code>function addPictureToTable(){
  
              var myPicture = document.getElementById("picture1");
              var table = document.getElementById("enlarged");
  
              var rowCount = table.rows.length;
              var row = table.insertRow(rowCount);
  
              row.insertCell(0).innerHTML= myPicture;
  
          }
  </code></pre>
  
  <p>If it helps, my pictures taken from the first table can be put into a simple div, not needing the second table.</p>