如何使用 javascript 以 HTML 格式显示图像数组？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6366068/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I display an array of images in HTML using javascript?
提问by Preethi
I am trying to create a contacts page and trying to populate the contacts image and name. I am able to display the array of names but not the array of pictures. Just the first picture is displayed.
我正在尝试创建一个联系人页面并尝试填充联系人图像和姓名。我可以显示名称数组，但不能显示图片数组。只显示第一张图片。
I am also trying to align the contact and the image in one row. But the contact image is displayed first then the contact name is displayed.
我还试图将联系人和图像对齐在一行中。但首先显示联系人图像，然后显示联系人姓名。
Here goes the code:
代码如下：
<script language="javascript" type="text/javascript">
function showContacts()
{
var myContacts=["abc","def","xyz"]; // literal array
for (var i=0;i<myContacts.length;i++)
{
document.getElementById('contact').innerHTML += myContacts[i]+"<br>";
//document.write(myArray[i]);
}
}
function preloader()
{
var myPhoto=["some photos"]; // literal array
// create object
var img=document.getElementById('photo');
// start preloading
for(var i=0; i< myPhoto.length; i++)
{
img.src += myPhoto[i]+"<br>";
//document.write(i);
//img.setAttribute('src',myPhoto[i]);
}
}
</SCRIPT>
<body onload="showContacts();preloader();">
<table width="100%" style="height: 100%;" border="0"><tr>
<col colspan="1" ><image id="photo"/>
<col colspan="1" ><p id="contact"/>
</tr></table>
</body>
</html>
What am I missing?
我错过了什么？
回答by roberkules
You need to add multiple images to the page. You can do that in javascript.
您需要向页面添加多个图像。你可以在javascript中做到这一点。
<table width="100%" style="height: 100%;" border="0">
<tr>
<td><p id="photos" /></td>
<td><p id="contacts" /></td>
</tr>
</table>
var container = document.getElementById("photos");
for (var i=0, len = myPhoto.length; i < len; ++i) {
var img = new Image();
img.src = myPhoto[i];
container.appendChild(img);
}
UPDATE: this is a simple demo how to add multiple images to the DOM. What you probably want to achieve is that you have multiple table rows with one name & image per row. To accomplish that, you have to create/append new rows/cells using document.createElement (or a framework like jQuery).
更新：这是一个如何向 DOM 添加多个图像的简单演示。您可能想要实现的是您有多个表格行，每行一个名称和图像。为此，您必须使用 document.createElement（或类似 jQuery 的框架）创建/附加新行/单元格。
UPDATE 2 - added a demo which adds multiple rows (one per contact):
更新 2 - 添加了一个添加多行（每个联系人一个）的演示：
回答by RobG
Your HTML is invalid, you need something like:
您的 HTML 无效，您需要类似以下内容：
<table>
<colgroup>
<col ...>
<colgroup>
<col ...>
<tr>
<td><img id="image0" ...>
<td><p id="contact0" ...>
<tr>
<td><img id="image1" ...>
<td><p id="contact1" ...>
...
</table>
Read the HTML 4.01 specification for tableelements and use the W3C validatorto check markup.
阅读表格元素的 HTML 4.01 规范并使用W3C 验证器检查标记。
The "preloader" script is not doing what you might think, roberkules' answer is on the right track.
“预加载器”脚本没有按照您的想法行事，roberkules 的回答是正确的。
