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]被隐式转换为字符串 - ＆＃34; htmlImageElement＆＃34;或者其他）

您需要显示<img>标记，其中src属性设置为myArray [i]中的属性，即：

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

Answer 2

这样做的一种方法是：

$(document.createElement('table'));
var result = "";
for (let i = 0; i < myArray.length; i++){
    result+= '<tr><td><img src="' + myArray[i] + '" alt=""/></td></tr>'
}
$('#table').append(result);

或者这个：

$(document.createElement('table'));
var result = "";
myArray.map(function(item){
    result+= '<tr><td><img src="' + item + '" alt=""/></td></tr>'
})
$('#table').append(result);

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

2 个答案: