How can I add image source file info into a new array inside of another array in 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. 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.

 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. 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>

How can I add image source file info into a new array inside of another array in javascript

Question

2 answers

solution1
1 2018-06-04 09:42:32

solution2
-1 2018-06-04 09:43:56

How can I add image source file info into a new array inside of another array in javascript

Question

2 answers

solution1 1 2018-06-04 09:42:32

solution2 -1 2018-06-04 09:43:56

solution1
1 2018-06-04 09:42:32

solution2
-1 2018-06-04 09:43:56