Question

我是学生，我在这里要做的是使用存储在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>

Answer 1

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

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

我建议您在运行for循环时将所需的索引作为参数传递给显示功能。您可以传递for循环计数器 i 但是您需要重新索引图像数组，因为 i = 0 。

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

我仔细查看了你的代码，我发现了一大堆问题，我继续修复，一切正常。我不会给你完整的答案，否则你不会学到很多东西。我只会告诉你哪里有错误。

首先此if语句错误：

 if (attrName = "img")

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

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

而不是全局创建一个名为getPets（）的函数，它返回pet并从makeTr（）函数内部调用它，因为它是唯一使用它的函数。

第三不要使用document.write，因为它会覆盖整个页面而不会将html分配给变量或者你正在做的任何事情。

nth 还有其他几个问题和改进，你必须做的太多，无法放在这里。只需遵循我原来的建议和所有这些新建议，做更多的调试和更多的努力，你就会得到它。你的buildTable函数中最后一件事你永远不会调用makeTr（＆＃34; img＆＃34;）;所以没有任何图像会显示出来。他们之前展示的唯一原因是因为我的第一次评论中所说的内容是学习者的错误，所以我理解。

从Javascript中显示表中的图像

1 个答案: