如何在Javascript中将图像源文件信息添加到另一个数组中的新数组中

Question

I am doing an assignment and need to dynamically create a table and add 20 image slices (1 in each cell) to make a whole picture. 我正在做作业，需要动态创建表格并添加20个图像切片（每个单元格1个）以制作完整图片。 I have found some code that I can adapt to suit what I need but I am stuck getting the image src info for each image into the new arrays created inside another array. 我找到了一些代码，可以适应我的需要，但是我一直坚持将每个图像的图像src信息放入另一个数组中创建的新数组中。

 function addTable() { var myTableDiv = document.getElementById("item_image") var table = document.createElement('TABLE') var tableBody = document.createElement('TBODY') table.border = '0' table.appendChild(tableBody); var columns = new Array(); columns[0] = "" columns[1] = "" columns[2] = "" columns[3] = "" columns[4] = "" var rows = new Array(); rows[0] = new Array("img 1", "img 2", "img 3", "img 4", "img 5"); rows[1] = new Array("img 6", "img 7", "img 8", "img 9", "img 10"); rows[2] = new Array("img 11", "img 12", "img 13", "img 14", "img 15"); rows[3] = new Array("img 16", "img 17", "img 18", "img 19", "img 20"); //TABLE COLUMNS var tr = document.createElement('TR'); tableBody.appendChild(tr); for (i = 0; i < columns.length; i++) { var th = document.createElement('TH') th.width = '75'; th.appendChild(document.createTextNode(columns[i])); tr.appendChild(th); } //TABLE ROWS for (i = 0; i < rows.length; i++) { var tr = document.createElement('TR'); for (j = 0; j < rows[i].length; j++) { var td = document.createElement('TD') td.appendChild(document.createTextNode(rows[i][j])); tr.appendChild(td) } tableBody.appendChild(tr); } myTableDiv.appendChild(table) }

 <!DOCTYPE html> <html lang="en"> <head> </head> <body> <div id="item_image"> <input type="button" id="create" value="Click here" onclick="Javascript:addTable()"> </div> I've put "img" in the cells purely to show what I mean. Any assistance would be greatly appreciated. </body> </html>

Answer 1

I'm assuming those string will be image paths. 我假设这些字符串将是图像路径。 You are creating a text node not an image element: 您正在创建文本节点而不是图像元素：

var td = document.createElement('td');
var img = document.createElement('img');
img.src = rows[i][j];
td.appendChild(img);
tr.appendChild(td);

Answer 2

You can create a new img element inside of your for loops and set the source ( and possible other properties ) to it. 您可以在for循环中创建一个新的img元素，并for设置源（ 以及其他可能的属性 ）。 This element will then be added to the table cell, as you did with the text before. 然后，该元素将被添加到表格单元格中，就像您之前处理文本一样。

 function addTable() { var myTableDiv = document.getElementById("item_image") var table = document.createElement('TABLE') var tableBody = document.createElement('TBODY') table.border = '0' table.appendChild(tableBody); var columns = new Array(); columns[0] = "" columns[1] = "" columns[2] = "" columns[3] = "" columns[4] = "" var rows = new Array(); rows[0] = new Array("img 1", "img 2", "img 3", "img 4", "img 5"); rows[1] = new Array("img 6", "img 7", "img 8", "img 9", "img 10"); rows[2] = new Array("img 11", "img 12", "img 13", "img 14", "img 15"); rows[3] = new Array("img 16", "img 17", "img 18", "img 19", "img 20"); //TABLE COLUMNS var tr = document.createElement('TR'); tableBody.appendChild(tr); for (i = 0; i < columns.length; i++) { var th = document.createElement('TH') th.width = '75'; th.appendChild(document.createTextNode(columns[i])); tr.appendChild(th); } //TABLE ROWS for (i = 0; i < rows.length; i++) { var tr = document.createElement('TR'); for (j = 0; j < rows[i].length; j++) { // create the 'img' element var img = document.createElement("img"); // set properties, like 'src', 'alt' and 'title' // for demo purpose i've used some dummy images herem you ma just use 'img.src = rows[i][j];' img.src = "https://dummyimage.com/100x75/000/fff&text=" + rows[i][j]; img.alt = rows[i][j]; img.title = rows[i][j]; var td = document.createElement('TD') // add the new image element to your cell td.appendChild(img); tr.appendChild(td) } tableBody.appendChild(tr); } myTableDiv.appendChild(table) }

 table { border-spacing: 0; } table td { padding: 0; font-size: 0; }

 <!DOCTYPE html> <html lang="en"> <head> </head> <body> <div id="item_image"> <input type="button" id="create" value="Click here" onclick="Javascript:addTable()"> </div> I've put "img" in the cells purely to show what I mean. Any assistance would be greatly appreciated. </body> </html>

如何在Javascript中将图像源文件信息添加到另一个数组中的新数组中

问题描述

2 个解决方案

解决方案1
1 2018-06-04 09:42:32

解决方案2
-1 2018-06-04 09:43:56

如何在Javascript中将图像源文件信息添加到另一个数组中的新数组中

问题描述

2 个解决方案

解决方案1 1 2018-06-04 09:42:32

解决方案2 -1 2018-06-04 09:43:56

解决方案1
1 2018-06-04 09:42:32

解决方案2
-1 2018-06-04 09:43:56