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

Javascript: Populating a table with images from an array

本文关键字：图像 填充 数组 Javascript      更新时间：2023-09-26

我试图创建一个javascript表，从图像数组的行10，但没有运气。表格工作，但每个单元格只有[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>');

看看代码中的这两行:

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

一种方法是:

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

相关文章：