从Javascript在表格中显示图像

Question

我是一名学生，我在这里想要做的是使用存储在Javascript中的数组从Javascript构建表。 该表工作得很好，但是我似乎无法将Images集成到表中。 不管我尝试什么，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")

其次，您的pets变量是全局变量，因此您无需将其作为参数传递给每个函数。避免使用全局变量，因为您很容易意外覆盖它们。

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

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

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

nth您还必须进行其他一些问题和改进，以至于无法解决。 只需遵循我的原始建议以及所有这些新建议，再进行一些调试和更多的工作，您就可以理解。 在buildTable函数中的最后一件事，您永远不会调用makeTr（“ img”）; 因此不会显示任何图像。 他们之前显示的唯一原因是因为我在“ 第一条评论”中所说的是学习者的错误，所以我理解。

从Javascript在表格中显示图像

问题描述

1 个解决方案

解决方案1
0 2015-03-25 04:55:32

从Javascript在表格中显示图像

问题描述

1 个解决方案

解决方案1 0 2015-03-25 04:55:32

解决方案1
0 2015-03-25 04:55:32