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

Question

I'm trying to create a javascript table with rows of 10 from an array of images but with no luck. The table works but each cell just has [object HTMLImageElement] instead of the image.

The code I tried is below.

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

Look at those two lines from your code:

myArray[i] = new Image();

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

So, myArray is an image , but in the second line you're trying to make it a string - "<td>" + myArray[j] + "<td>" - this is a way to concatenate strings, not objects. (in this case, myArray[i] is implicitly converted to a string - "htmlImageElement" or whatever)

What you need is to display an <img> tag with the src attribute set to the one in myArray[i], ie:

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

Answer 2

One way to do this is this:

$(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);

Or this:

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