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>

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

“preloader”脚本没有按照你的想法行事，roberkules的回答是正确的。

如何使用javascript以HTML格式显示图像数组？

2 个答案: