如何在预定义的html表中显示来自javascript数组的图像

Question

嗨，我是一名学生，目前正在做一个html和javascript项目。 我最初来到此站点的目的是寻找一种从另一个数组中引用的javascript数组中获取图像并将其显示在预定义的html表中的方法。

可以预料的是，我从未找到确切的问题答案，而是设法利用各种帖子和用户回答的帖子提供的点点滴滴的代码和知识，以自己的方式解决该问题。

现在它可以工作了，我想问一下大家，是否可以帮助我简化代码，或者将来可以建议其他更简单的方法。

我是javascript和html的新人。 我正在使用Firefox，但尚未使用jquery。

这是有问题的html页面中的代码。

  <body>
    <table border="4px">
      <caption>
        Pet Table
      </caption>
      <tr>
        <!-- Images-->
        <td>
          <script>
            display(bat)
          </script>;
        </td>
        <td>
          <script>
            display(goat)
          </script>
        </td>
        <td>
          <script>
            display(butterfly)
          </script>
        </td>
      </tr>
    </table>
  </body>

这是带有三个示例的javascript。

        function pet(species, name, colour, size, food, limb, img) {
            this.species = species; //property of a pet
            this.name = name; //property of a pet
            this.colour = colour; //property of a pet
            this.size = size; //property of a pet
            this.food = food; //property of a pet
            this.limb = limb; //property of a pet
            this.img = img; //property of a pet         
            this.move = move; //a function of a pet defined to the pet

          }
          //array for images used in the pet array

        var imgArray = new Array();
        imgArray[0] = new Image();
        imgArray[0].src = "resources/bat.gif";
        imgArray[0].height = "200";
        imgArray[0].width = "200";

        imgArray[1] = new Image();
        imgArray[1].src = "resources/goatVec01.png";
        imgArray[1].height = "200";
        imgArray[1].width = "200";

        imgArray[2] = new Image();
        imgArray[2].src = "resources/butterfly.gif";
        imgArray[2].height = "200";
        imgArray[2].width = "200";

<!-- more images -->


        //adding variables to the pet array
        var bat = new pet("fruit bat", "bats", "grey", "small", "apples", "wings", "0", move);

        var goat = new pet("goat", "bastard", "off white", "goat-sized", "clothing", "hooves", "1", move);

        var butterfly = new pet("butterfly", "flutterby", "rainbow", "petite", "nectar", "wings", "2", move);

<!-- more variables -->


 //function used to call and display the images
        function display(pet) {
          var i = document.write(imgArray[pet.img].outerHTML);
        }

如果我要多问第二个问题。 自从我开始使用Firefox以来，我不得不使用这段代码来使html正常工作，但我想知道除了将它们添加到每个页面之外，是否还有其他方法可以做到这一点。

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

有很大帮助的帖子列表

来自数组HTML Javascript的图像

如何显示图像多数民众赞成在阵列？ JavaScript的

如何使用javascript显示图像？

未声明HTML文档的字符编码

Answer 1

第一个问题，您想给所有元素id。 这样，您可以使用javascript引用它们。

第二个问题，在现实世界中的应用程序编程中，您将为所有网站创建ssi文件。 SSI代表服务端包含。 然后，您只需在ssi文件中输入一次信息，该文件就会自动将这些元标记放置在您正在加载的每个网页中。 如果您是编程专业的学生，我想您的课程有时会涉及到这一点。

如何在预定义的html表中显示来自javascript数组的图像

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-03-12 09:56:30

如何在预定义的html表中显示来自javascript数组的图像

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-03-12 09:56:30

解决方案1
0 已采纳 2015-03-12 09:56:30