如何使用JavaScript在HTML中顯示圖像數組？

Question

我正在嘗試創建聯系人頁面，並嘗試填充聯系人圖像和姓名。 我可以顯示名稱數組，但不能顯示圖片數組。 僅顯示第一張圖片。

我還試圖將聯系人和圖像對齊為一行。 但是首先顯示聯系人圖像，然后顯示聯系人姓名。

代碼如下：

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

我想念什么？

Answer 1

您需要向頁面添加多個圖像。 您可以在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/

Answer 2

您的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規范，並使用W3C驗證器檢查標記。

“預加載器”腳本沒有按照您的想法做，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