從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