如何使用JavaScript在HTML中显示图像数组？

Question

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? 我想念什么？

Answer 1

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. 更新：这是一个简单的演示如何将多个图像添加到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). 为此，您必须使用document.createElement（或类似jQuery的框架）创建/添加新的行/单元格。

UPDATE 2 - added a demo which adds multiple rows (one per contact): 更新2-添加了一个演示，该演示添加了多行（每个联系人一个）：

http://jsfiddle.net/roberkules/WRgjv/ http://jsfiddle.net/roberkules/WRgjv/

Answer 2

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 table elements and use the W3C validator to check markup. 阅读表元素的HTML 4.01规范，并使用W3C验证器检查标记。

The "preloader" script is not doing what you might think, roberkules' answer is on the right track. “预加载器”脚本没有按照您的想法做，roberkules的答案是正确的。

如何使用JavaScript在HTML中显示图像数组？

问题描述

2 个解决方案

解决方案1
3 已采纳 2011-06-16 01:10:35

解决方案2
0 2011-06-16 01:09:50

如何使用JavaScript在HTML中显示图像数组？

问题描述

2 个解决方案

解决方案1 3 已采纳 2011-06-16 01:10:35

解决方案2 0 2011-06-16 01:09:50

解决方案1
3 已采纳 2011-06-16 01:10:35

解决方案2
0 2011-06-16 01:09:50