<div id="fileList">
      <table id="galleryTable" class="table table-striped table-advance table-hover">
            <tr>
              <th>Field 0</th>
              <th>Field 1</th>
              <th>Field 2</th>
              <th>Field 3</th>
              <th>Field 4</th>
              <th>Field 5</th>
              <th>Field 6</th>
          </tr>
      </table>
</div>

<script type="text/javascript">
    var imageObjectTable = [];
    var imageTable =[];
    var dateTable =  [];
    var urlTable = [];
    var commentTextTable =[];
    var commentUserTable =[];
    var commentUserProfilePicTable = [];
    var commenteDateTable =[];
    var i = 0;

    {% for imagemodel in imagemodel %}
        imageObjectTable.push("{{ imagemodel }}");
        imageTable.push("{{ imagemodel.image }}");
        dateTable.push("{{ imagemodel.date_taken }}");
        urlTable.push("{{ imagemodel.image.url }}");


        {% for comment in imagemodel.comments.all %}
            commentTextTable.push(new Array());
            commentTextTable[i].push("{{ comment.text }}");
            commentUserTable.push(new Array());
            commentUserTable[i].push("{{ comment.user }}");
            commentUserProfilePicTable.push(new Array());
            commentUserProfilePicTable[i].push("{{ comment.user.profile.profile_pic }}");
            commenteDateTable.push(new Array());
            commenteDateTable[i].push("{{ comment.created_date }}");
            {% empty %}
            commentTextTable.push(new Array());
            commentTextTable[i].push("No comment yet");
            commentUserTable.push(new Array());
            commentUserTable[i].push("No text comment yet");
            commenteDateTable.push(new Array());
            commenteDateTable[i].push("No date comment yet");
        {% endfor %}

        i = i+1;
    {% endfor %}

    table = document.getElementById("galleryTable");

          for(var i = 0; i < imageTable.length; i++)
           {
               // create a new row
               var newRow = table.insertRow(table.length);
               var cell0 = newRow.insertCell(0);
               cell0.innerHTML = imageTable[i];
               var cell1 = newRow.insertCell(1);
               cell1.innerHTML = dateTable[i];
               var cell2 = newRow.insertCell(2);
               cell2.innerHTML = urlTable[i];
               var cell3 = newRow.insertCell(3);
               cell3.innerHTML = "<input type='radio' name='RadioGroup1' onchange="setImage1('" + urlTable[i] + "','" + commentTextTable[i] + "','" + commentUserTable[i] + "','" + commenteDateTable[i] + "','" + commentUserProfilePicTable[i] +"')">" ;
                var cell4 = newRow.insertCell(4);
               cell4.innerHTML = "<input type='radio' name='RadioGroup2' onchange="setImage2('" + urlTable[i] + "','" + commentTextTable[i] + "')">" ;
                var cell5 = newRow.insertCell(5);
               cell5.innerHTML = "<input type='radio' name='RadioGroup3' onchange="setImage3('" + urlTable[i] + "','" + commentTextTable[i] + "')">" ;
                var cell6 = newRow.insertCell(6);
               cell6.innerHTML = "<input type='radio' name='RadioGroup4' onchange="setImage4('" + urlTable[i] + "','" + commentTextTable[i] + "')">" ;
           }
</script>

function oneImageView() {

          var im2 = document.getElementById("2x2_topright");
          var im3 = document.getElementById("2x2_bottomleft");
          var im4 = document.getElementById("2x2_bottomright");


          var tbl  = document.getElementById('galleryTable');
          var rows = tbl.getElementsByTagName('tr');

          for (var row=0; row<rows.length;row++) {
              var cels = rows[row].getElementsByTagName('td')
              alert(rows[row].lenght);
              //cels[2].style.display= "none";
            }
}