从Javascript在表格中显示图像
[英]Displaying an image in a table from Javascript
问题描述
I'm a student and what I'm trying to do here is to build a table from Javascript using arrays stored in the Javascript. 
我是一名学生，我在这里想要做的是使用存储在Javascript中的数组从Javascript构建表。 The table works well enough but I can't seem to integrate the Images into the table. 该表工作得很好，但是我似乎无法将Images集成到表中。 No matter what I try the ImgArray remains undefined. 不管我尝试什么，ImgArray都是不确定的。 Could any of you point me in the right direction of getting this to work? 你们中的任何人都可以指出我正确的方向吗？
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>
1 个解决方案
解决方案1
0 2015-03-25 04:55:32
You are trying to access an undefined array location. 您正在尝试访问未定义的数组位置。 You should access your image array using the indexes that you defined: 您应该使用定义的索引访问图像数组：
var pic = document.write(imgArray[1].outerHTML);
I recommend passing the index that you need to as a parameter to the display function as you run your for loop. 我建议在运行for循环时将需要的索引作为参数传递给显示函数。 You can pass the for loop counter i but you will need to re-index your image array since i=0 . 您可以传递for循环计数器i，但由于i = 0，因此您需要重新索引图像数组。
function display(imgIdx) {
var pic = document.write(imgArray[imgIdx].outerHTML);
}
I took a closer look at your code and i found a whole bunch of problems which I went ahead and fixed and everything worked fine. 我仔细研究了一下您的代码，发现了很多问题，然后继续进行修复，一切正常。 I will not give you the full answer otherwise you won't learn much. 我不会给您完整的答案，否则您将学不到很多。 I will simply advise you as to where you have mistakes. 对于您在哪里有错误，我只建议您。
First this if statement is wrong: 首先，这if语句是错误的：
if (attrName = "img")
Second your pets variable is a global variable so you do not need to pass it as a parameter to every single function.Avoid global variables since you can very easily overwrite them accidentally. 其次，您的pets变量是全局变量，因此您无需将其作为参数传递给每个函数。避免使用全局变量，因为您很容易意外覆盖它们。
`function buildTable(pet) //remove parameter
function makeTr(pet, attrName) //remove pet parameter`
Instead of a global make a function called getPets() that returns pet and call it from inside your makeTr() function since it is the only function that uses it. 而不是全局创建一个名为getPets（）的函数，该函数返回pet并从您的makeTr（）函数内部调用它，因为它是唯一使用它的函数。
Third Do not use document.write because it will overwrite the entire page not assign html to a variable or whatever the heck you though you were doing. 第三，不要使用document.write，因为它将覆盖整个页面，而不是将html分配给变量或您所做的任何事情。
nth There are a several other problems and improvements you must make, too many to put here. nth您还必须进行其他一些问题和改进，以至于无法解决。 Just follow my original advice and all this new ones and do some more debugging and more hard work and you'll get it. 只需遵循我的原始建议以及所有这些新建议，再进行一些调试和更多的工作，您就可以理解。 One last thing in your buildTable function you never make a call to makeTr("img"); 在buildTable函数中的最后一件事，您永远不会调用makeTr（“ img”）; so no images wil ever show. 因此不会显示任何图像。 The only reason they did show before is because of what is said on my First comment which is a learners mistake so I understand. 他们之前显示的唯一原因是因为我在“ 第一条评论”中所说的是学习者的错误，所以我理解。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.