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

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

javascript html

如何使用javascript在HTML中显示图像数组？,javascript,html,Javascript,Html,我正在尝试创建联系人页面，并尝试填充联系人图像和姓名。我可以显示名称数组，但不能显示图片数组。只显示第一张图片我还试图在一行中对齐联系人和图像。但是联系人的形象是首先显示，然后显示联系人姓名代码如下： <script language="javascript" type="text/javascript"> function showContacts() { var myContacts=["abc","def","xyz"]; // literal array

我正在尝试创建联系人页面，并尝试填充联系人图像和姓名。我可以显示名称数组，但不能显示图片数组。只显示第一张图片

我还试图在一行中对齐联系人和图像。但是联系人的形象是首先显示，然后显示联系人姓名

代码如下：

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


函数showContacts（）
{
var myContacts=[“abc”，“def”，“xyz”]；//文本数组
对于（var i=0；i您的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规范中的元素，并使用检查标记
“预加载程序”脚本没有按照您的想法执行，roberkules的答案是正确的。
您的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规范中的元素，并使用检查标记
“预加载程序”脚本没有按照您的想法进行操作，roberkules的答案是正确的。
您需要向页面添加多个图像。您可以使用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);
}




var container=document.getElementById（“照片”）；
对于（变量i=0，len=myPhoto.length；i

更新：这是一个如何向DOM添加多个图像的简单演示。您可能想要实现的是，您有多个表行，每行有一个名称和图像。要实现这一点，您必须使用document.createElement（或类似jQuery的框架）创建/追加新行/单元格
更新2-添加了一个演示，其中添加了多行（每个联系人一行）：
您需要在页面中添加多个图像。您可以使用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);
}




var container=document.getElementById（“照片”）；
对于（变量i=0，len=myPhoto.length；i

更新：这是一个如何向DOM添加多个图像的简单演示。您可能想要实现的是，您有多个表行，每行有一个名称和图像。要实现这一点，您必须使用document.createElement（或类似jQuery的框架）创建/追加新行/单元格
更新2-添加了一个演示，其中添加了多行（每个联系人一行）：
谢谢：）工作得很好。正是我需要的。谢谢：）工作得很好。正是我需要的。