Javascript:用数组中的图像填充表格

Question

我正在尝试从图像数组中创建一个包含 10 行的 JavaScript 表，但没有成功。该表可以工作，但每个单元格只有 [object HTMLImageElement] 而不是图像。

我尝试过的代码如下。

for(var i=0; i<myArray.length; i++){
    myArray[i] = new Image();
    myArray[i].src = i + '.gif'; 
}

document.writeln('<table border = 1 >');
for(var j=0; j<myArray.length; j++){
    if(j%10==0 && j!==0){
    document.writeln('</tr><tr>');
    }
    document.writeln('<td >' + myArray[j] + '</td>');
}
document.writeln('</tr></table>');

Answer 1

查看代码中的这两行:

myArray[i] = new Image();

document.writeln('<td >' + myArray[j] + '</td>'); // wrong - myArray has to be a string

所以，myArray 是一个图像，但在第二行中你试图将其变成一个字符串 - "<td>" + myArray[j] + "<td>" - 这是一种连接字符串而不是对象的方法。 (在这种情况下，myArray[i] 被隐式转换为字符串 - “htmlImageElement”或其他)

您需要的是显示 <img>带有 src 的标签属性设置为 myArray[i] 中的属性，即:

document.writeln('<td ><img src="' + myArray[j].src + '" /></td>');