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

我正在尝试创建联系人页面并尝试填充联系人图像和名称。我可以显示名称数组，但不能显示图片数组。只显示第一张照片。如何使用javascript在HTML中显示图像数组？

我也试图将联系人和图像排成一行。但首先显示的联系人图像为，然后显示联系人姓名。

这里去代码：

<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>

我缺少什么？

来源

2011-06-16 Preethi

您需要添加多个图像到页面。你可以在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); 
}

更新：这是一个简单的演示如何将多个图像添加到DOM。你可能想要实现的是你有多行表格，每行一个名字&。要做到这一点，你必须使用document.createElement（或像jQuery这样的框架）创建/追加新的行/单元格。

更新2 - 增加了一个演示它增加了多行（每接触一个）：

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

来源

2011-06-16 01:10:35 roberkules

谢谢:)工作得很好。只是我需要的一个。 – Preethi 2011-06-16 02:21:59

你的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>

阅读HTML 4.01规范table元素，并使用W3C validator检查标记。

“preloader”脚本没有做你可能会想的，roberkules的答案是在正确的轨道上。

来源

2011-06-16 01:09:50 RobG

@罗布是的，你是对的。感谢你的回答。 – Preethi 2011-06-16 02:22:43

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

回答

相关问题