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将在每个循环中保存下一个图像位置）。

将IMG对象附加到表单元格

1 个答案: