时间戳

首页 > 解决方案 > 将 IMG 对象附加到表格单元格中

javascript - 将 IMG 对象附加到表格单元格中

问题描述

我有一项任务需要完成。

我必须用 Javascript 创建一个表。我这样做没有问题。

然后我必须使用 Javascript 将 20 个图像切片预加载到一个数组中。我也可以这样做。

这就是我卡住的地方。我必须获取预加载的图像并将它们按顺序附加到表格单元格中。

它让我发疯，我找不到任何关于如何做到这一点的说明。任何人都可以帮忙吗？

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");

标签： javascriptimageobject

解决方案

您可以为您的表格创建一个“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 将在每个循环中保存下一个图像位置）。

推荐阅读