Javascript：配列の画像をテーブルに埋め込む

Question

画像の配列から10行の行を持つJavaScriptテーブルを作成しようとしていますが、運がありません。テーブルは機能しますが、各セルには画像の代わりに[オブジェクト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のは画像ですが、2行目に、あなたはそれの文字列にするためにしようとしている - "<td>" + myArray[j] + "<td>" - このオブジェクトではなく文字列を連結する方法です。あなたが必要なもの

は、myarrayの[i]は、IEのいずれかに設定src属性を持つ<img>タグを表示することです - （「htmlImageElement」またはものは何でも、この場合には、myarrayの[i]は、暗黙的に文字列に変換されます） ：

$(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.writeln('<td ><img src="' + myArray[j].src + '" /></td>'); 

Answer 2

一つの方法はこれです

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