Добавить объекты IMG в ячейки таблицы

Question

У меня есть задача, которую нужно выполнить для назначения.

Мне нужно создать таблицу с помощью Javascript.Что у меня нет проблем, делая это.

Затем я должен использовать Javascript, чтобы предварительно загрузить двадцать фрагментов изображения в массив.Что я тоже могу сделать.

Вот где я застрял.Я должен взять предварительно загруженные изображения и добавить их в ячейки таблицы по порядку.

Это сводит меня с ума, я не могу найти инструкции о том, как это сделать.Кто-нибудь может помочь?

R

Аарон

РЕДАКТИРОВАТЬ

Я добавил свой текущий пример кода js

//create a table
function imageTable(){
   var table = '';
   var rows = 4;
  var cols = 5;
  var queryString = window.location.search;
    queryString = queryString.substring(1);
  var result = queryString;
  if (result === "bcpot002"){
  for(var r = 0; r < rows;r++)
  {
    table += '<tr class="myTr">';
    for(var c = 0; c < cols;c++)
    {
        table += '<td class="myTd">'+ 'test' + '</td>';
    }
    table += '</tr>';
  }

  document.getElementById("ImageContent").innerHTML = '<table class="myTable" id="myTable" cellspacing="0px" cellpadding="0px" align="center">' + table + '</table>';
  }
}
window.onload = imageTable;


//Preload images script
var myTable = document.getElementById("mytable");
var myimages=[];
function preloadimagesRedBowl()
{
    for (i=0;i<preloadimagesRedBowl.arguments.length;i++)
    {
        myimages[i]=new Image();
        myimages[i].src=preloadimagesRedBowl.arguments[i];
        myimages[i].className="myImg";
  }
            {
         var td = document.getElementsByClassName("myTd");
                        for (i=0;i<td.length;i++)
                        {
                        td.appendChild(myimages);
                        }

    }
}


//Images to be preloaded.
preloadimagesRedBowl("../../images/Large/bcpot002_r1_c1.jpg", "../../images/Large/bcpot002_r1_c2.jpg", "../../images/Large/bcpot002_r1_c3.jpg","../../images/Large/bcpot002_r1_c4.jpg", "../../images/Large/bcpot002_r1_c5.jpg","../../images/Large/bcpot006_r1_c1.jpg", "../../images/Large/bcpot006_r1_c2.jpg", "../../images/Large/bcpot006_r1_c3.jpg","../../images/Large/bcpot006_r1_c4.jpg", "../../images/Large/bcpot006_r1_c5.jpg","../../images/Large/bcpot008_r1_c1.jpg", "../../images/Large/bcpot008_r1_c2.jpg", "../../images/Large/bcpot008_r1_c3.jpg","../../images/Large/bcpot008_r1_c4.jpg", "../../images/Large/bcpot008_r1_c5.jpg","../../images/Large/bcpot010_r1_c1.jpg", "../../images/Large/bcpot010_r1_c2.jpg", "../../images/Large/bcpot010_r1_c3.jpg","../../images/Large/bcpot010_r1_c4.jpg", "../../images/Large/bcpot010_r1_c5.jpg", "../../images/Large/bcpot013_r1_c1.jpg", "../../images/Large/bcpot013_r1_c2.jpg", "../../images/Large/bcpot013_r1_c3.jpg","../../images/Large/bcpot013_r1_c4.jpg", "../../images/Large/bcpot013_r1_c5.jpg","../../images/Large/bcpot020_r1_c1.jpg", "../../images/Large/bcpot020_r1_c2.jpg", "../../images/Large/bcpot020_r1_c3.jpg","../../images/Large/bcpot020_r1_c4.jpg", "../../images/Large/bcpot020_r1_c5.jpg");

Answer 1

Вы можете создать элемент 'td' для своей таблицы и добавить к нему ваши изображения.

var newTd = document.createElement("td");
var img = document.createElement("IMG");
img.setAttribute("src", image_location);
img.setAttribute("width", "150");
img.setAttribute("height", "150");
newTd.appendChild(img);
document.getElementById("yourTableId").appendChild(newTd);

Сделайте это в цикле for (image_location будет содержать следующую позицию изображения в каждом цикле).