如何使用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中顯示圖像數組？

回答

相關問題