从Javascript在表中显示图像

Displaying an image in a table from Javascript

本文关键字：显示 显示图 图像 Javascript      更新时间：2023-09-26

我是一名学生，在这里我要做的是使用存储在Javascript中的数组从Javascript构建一个表。这张表工作得很好，但我似乎无法将图像集成到表中。无论我尝试什么，ImgArray都保持未定义状态。你们中的任何一个人能给我指出让这件事发挥作用的正确方向吗？

var pet = [{
  species: 'fruit bat',
  name: 'bats',
  colour: 'grey',
  size: 'small',
  food: 'apples',
  limb: "wings",
  img: "0"
}, {
  species: 'goat',
  name: 'bastard',
  colour: 'off white',
  size: 'goat-sized',
  food: 'clothing',
  limb: "hooves",
  img: "1"
}, {
  species: 'butterfly',
  name: 'flutterby',
  colour: 'rainbow',
  size: 'petite',
  food: 'nectar',
  limb: "wings",
  img: "2"
}, {
  species: 'buzzard',
  name: 'Buzz',
  colour: 'molted black and white',
  size: 'bigish',
  food: 'carrion',
  limb: "wings",
  img: "3"
}, {
  species: 'pixie',
  name: 'petty',
  colour: 'blue',
  size: 'tiny',
  food: 'souls',
  limb: "wings",
  img: "4"
}, {
  species: 'tortoise',
  name: 'Tank',
  colour: 'Green',
  size: 'smoothbacked',
  food: 'lettuce',
  limb: "legs",
  img: "5"
}];
//array for holding images for the pet array
imgArray = [];
imgArray[1] = new Image();
imgArray[1].src = "resources/bat.gif"; //source of the image
imgArray[2] = new Image();
imgArray[2].src = "resources/goatVec01.png";
imgArray[3] = new Image();
imgArray[3].src = "resources/butterfly.gif";
imgArray[4] = new Image();
imgArray[4].src = "resources/buzzard01.png";
imgArray[5] = new Image();
imgArray[5].src = "resources/breezie01.png";
imgArray[6] = new Image();
imgArray[6].src = "resources/turtle.gif";
var len = imgArray.length;
function display() {  //added a for loop
  var i;
  for (i = 0; i < len; ++i) {
    var pic = document.write(imgArray[i].outerHTML);
  }
}
function makeTr(pet, attrName) {
  var html = '',
    i;
  html += "<tr>";
  for (i = 0; i < pet.length; ++i) {
    if (attrName = "img") {
      document.getElementById("pic".outerHTML)
      html += "<td>" + display() + "</td>";
    } else {
      html += "<td>" + pet[i][attrName] + "</td>";
    }
    html += "</tr>";
    return html;
  }
}
function buildTable(pet) {
  var html = '';
  html += "<table border='4px'>";
  html += "<caption>Pets Avaliable</caption>";
  html += makeTr(pet, "species");
  html += makeTr(pet, "name");
  html += makeTr(pet, "colour");
  html += makeTr(pet, "size");
  html += "</table>";
  document.getElementById("work").innerHTML = html;
}
<!DOCTYPE html>
<html>
<head>
  <!-- Used to declare the character for use in Firefox. http://stackoverflow.com/questions/11996257/the-character-encoding-of-the-html-document-was-not-declared-->
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type"></meta>
  <meta content="utf-8" http-equiv="encoding"></meta>
  <title>Pets</title>
  <script type="text/javascript" src="java01.js">
  </script>
  <body>
    <button id="please" onclick="buildTable(pet)">Work</button>
    <p id="work"></p>
  </body>
</html>

您正试图访问一个未定义的数组位置。您应该使用您定义的索引来访问您的图像阵列：

var pic = document.write(imgArray[1].outerHTML);

我建议在运行for循环时，将需要的索引作为参数传递给display函数。您可以传递for循环计数器i，但由于i=0需要重新索引图像数组。

function display(imgIdx) {
  var pic = document.write(imgArray[imgIdx].outerHTML);
}

我仔细查看了你的代码，发现了一大堆问题，我继续解决了这些问题，一切都很好。我不会给你完整的答案，否则你不会学到很多东西。我只是简单地告诉你哪里有错误。

第一个如果语句错误：

 if (attrName = "img")

第二个您的pets变量是一个全局变量，因此您不需要将其作为参数传递给每个函数。避免全局变量，因为您很容易意外地覆盖它们。

 `function buildTable(pet) //remove parameter
 function makeTr(pet, attrName) //remove pet parameter`

代替全局生成一个名为getPets（）的函数，该函数返回pet并从makeTr（）函数内部调用它，因为它是唯一使用它的函数。

第三个不要使用document.write，因为它会覆盖整个页面，而不是将html分配给变量，或者不管你在做什么。

nth还有其他几个问题和改进，太多了，不能放在这里。只要遵循我最初的建议和所有这些新建议，再做一些调试和艰苦的工作，你就会得到它。在你的buildTable函数中，最后一件事是你永远不会调用makeTr（"img"）；所以不会出现任何图像。他们之前出现的唯一原因是我第一次评论中所说的话，这是一个学习者的错误，所以我理解。

相关文章：