How to add image slices in place of createTextNode when building a table with JS2019 Community Moderator ElectionHow do you remove all the options of a select box and then add one option and select it with jQuery?Add table row in jQueryHow to execute a JavaScript function when I have its name as a stringHow do I add a class to a given element?How can I add a key/value pair to a JavaScript object?How to decide when to use Node.js?How can I add new array elements at the beginning of an array in Javascript?Pure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for itHow to set image tag to the html table with javascript?Javascript using document.createElement() and node .appendChild() with <table>
validation vs test vs training accuracy, which one to compare for claiming overfit?
Latest web browser compatible with Windows 98
Can you reject a postdoc offer after the PI has paid a large sum for flights/accommodation for your visit?
Replacing Windows 7 security updates with anti-virus?
When is a batch class instantiated when you schedule it?
Provisioning profile doesn't include the application-identifier and keychain-access-groups entitlements
Why do Australian milk farmers need to protest supermarkets' milk price?
Is it true that real estate prices mainly go up?
Ban on all campaign finance?
How is the Swiss post e-voting system supposed to work, and how was it wrong?
Does splitting a potentially monolithic application into several smaller ones help prevent bugs?
Single word request: Harming the benefactor
Humans have energy, but not water. What happens?
Why doesn't the EU now just force the UK to choose between referendum and no-deal?
"One can do his homework in the library"
Am I not good enough for you?
"However" used in a conditional clause?
Touchscreen-controlled dentist office snowman collector game
My story is written in English, but is set in my home country. What language should I use for the dialogue?
What happens with multiple copies of Humility and Glorious Anthem on the battlefield?
How could a female member of a species produce eggs unto death?
What is the difference between "shut" and "close"?
Unreachable code, but reachable with exception
Should QA ask requirements to developers?
How to add image slices in place of createTextNode when building a table with JS
2019 Community Moderator ElectionHow do you remove all the options of a select box and then add one option and select it with jQuery?Add table row in jQueryHow to execute a JavaScript function when I have its name as a stringHow do I add a class to a given element?How can I add a key/value pair to a JavaScript object?How to decide when to use Node.js?How can I add new array elements at the beginning of an array in Javascript?Pure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for itHow to set image tag to the html table with javascript?Javascript using document.createElement() and node .appendChild() with <table>
0
I have an external JavaScript file which builds a table of four rows and four columns and inserts the text "row 0, column 0", "row 0, column 1", "row 0, column 2" and so forth with the document.createTextNode. However, I want to insert image slices into the table cells instead of the text to build up a large image. Is there any ideas about to go about this, my JS code is below.
function generate_table()
var body = document.getElementsByTagName("body")[0];
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
for (var r = 0; r < 4; r++)
var row = document.createElement("tr");
for (var c = 0; c < 4; c++)
var cell = document.createElement("td");
var cellText = document.createTextNode("row "+r+", column "+c);
cell.appendChild(cellText);
row.appendChild(cell);
tblBody.appendChild(row);
tbl.appendChild(tblBody);
body.appendChild(tbl);
javascript
asked Mar 6 at 17:36
MichaelMichael
1
add a comment |
0
I have an external JavaScript file which builds a table of four rows and four columns and inserts the text "row 0, column 0", "row 0, column 1", "row 0, column 2" and so forth with the document.createTextNode. However, I want to insert image slices into the table cells instead of the text to build up a large image. Is there any ideas about to go about this, my JS code is below.
function generate_table()
var body = document.getElementsByTagName("body")[0];
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
for (var r = 0; r < 4; r++)
var row = document.createElement("tr");
for (var c = 0; c < 4; c++)
var cell = document.createElement("td");
var cellText = document.createTextNode("row "+r+", column "+c);
cell.appendChild(cellText);
row.appendChild(cell);
tblBody.appendChild(row);
tbl.appendChild(tblBody);
body.appendChild(tbl);
javascript
asked Mar 6 at 17:36
MichaelMichael
1
add a comment |
0
0
0
I have an external JavaScript file which builds a table of four rows and four columns and inserts the text "row 0, column 0", "row 0, column 1", "row 0, column 2" and so forth with the document.createTextNode. However, I want to insert image slices into the table cells instead of the text to build up a large image. Is there any ideas about to go about this, my JS code is below.
function generate_table()
var body = document.getElementsByTagName("body")[0];
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
for (var r = 0; r < 4; r++)
var row = document.createElement("tr");
for (var c = 0; c < 4; c++)
var cell = document.createElement("td");
var cellText = document.createTextNode("row "+r+", column "+c);
cell.appendChild(cellText);
row.appendChild(cell);
tblBody.appendChild(row);
tbl.appendChild(tblBody);
body.appendChild(tbl);
javascript
asked Mar 6 at 17:36
MichaelMichael
1
I have an external JavaScript file which builds a table of four rows and four columns and inserts the text "row 0, column 0", "row 0, column 1", "row 0, column 2" and so forth with the document.createTextNode. However, I want to insert image slices into the table cells instead of the text to build up a large image. Is there any ideas about to go about this, my JS code is below.
function generate_table()
var body = document.getElementsByTagName("body")[0];
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
for (var r = 0; r < 4; r++)
var row = document.createElement("tr");
for (var c = 0; c < 4; c++)
var cell = document.createElement("td");
var cellText = document.createTextNode("row "+r+", column "+c);
cell.appendChild(cellText);
row.appendChild(cell);
tblBody.appendChild(row);
tbl.appendChild(tblBody);
body.appendChild(tbl);
javascript
javascript
asked Mar 6 at 17:36
MichaelMichael
1
asked Mar 6 at 17:36
MichaelMichael
1
asked Mar 6 at 17:36
MichaelMichael
1
asked Mar 6 at 17:36
MichaelMichael
1
asked Mar 6 at 17:36
MichaelMichael
1
1
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
3D Array
Get the urls of 16 images and place them in a 3D array:
var fourXfour3DArray = [
[url0, url1, url2, url3],
[url4, url5, url6, url7],
[url8, url9, url10, url11],
[url12, url13, url14, url15]
];
In the demo the line where createTextNode() is replaced by a function called setImg() which will accept a 3D array of image urls, and index numbers of current row and column positions.
Demo
Details are commented in demo
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
</head>
<body>
<script>
var imgArray = [['http://www.clker.com/cliparts/U/k/6/3/4/M/yellow-rounded-number-0-md.png', 'http://www.clker.com/cliparts/2/5/6/d/1242796868203109724Number_1_in_green_rounded_square.svg.med.png', 'http://www.clker.com/cliparts/k/e/O/E/Y/f/orange-rounded-square-with-number-2-md.png','http://www.clker.com/cliparts/m/e/j/n/R/V/number-3-in-light-blue-rounded-square-md.png'],['http://www.clker.com/cliparts/X/b/l/a/X/w/red-rounded-square-with-number-3-md.png', 'http://www.clker.com/cliparts/p/7/W/8/F/T/purple-rounded-square-with-number-5-md.png', 'http://www.clker.com/cliparts/1/R/V/3/S/t/number-6-square-orange-md.png', 'http://www.clker.com/cliparts/g/I/c/I/S/3/red-rounded-square-with-number-7-md.png'], [ 'http://www.clker.com/cliparts/V/T/J/T/o/M/blue-rounded-square-with-number-8-md.png', 'http://www.clker.com/cliparts/B/f/Q/6/l/x/red-rounded-square-with-number-8-md.png', 'http://www.clker.com/cliparts/W/J/x/h/t/E/red-rounded-square-with-number-10-md.png', 'http://www.clker.com/cliparts/O/C/B/M/R/0/blue-rounded-square-with-number-11-md.png'], ['http://www.clker.com/cliparts/0/Y/a/p/2/W/hot-pink-rounded-square-with-number-12-md.png','http://www.clker.com/cliparts/V/X/Y/5/Y/t/red-rounded-square-with-number-13-th.png', 'http://www.clker.com/cliparts/W/H/D/y/K/5/green-rounded-square-with-number-14-md.png', 'http://www.clker.com/cliparts/q/l/a/c/m/x/purple-rounded-square-with-number-15-md.png']];
function generateTable(imgArray)
var body = document.getElementsByTagName("body")[0];
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
for (var r = 0; r < 4; r++)
var row = document.createElement("tr");
for (var c = 0; c < 4; c++)
var cell = document.createElement("td");
// Call setImg() pass imgArray, current row and column index
var cellImg = setImg(imgArray, r, c);
cell.appendChild(cellImg);
row.appendChild(cell);
tblBody.appendChild(row);
tbl.appendChild(tblBody);
body.appendChild(tbl);
/*
Pass a 3D array, current index numbers of row and column positions
Create a <img>
Add url and width
return <img>
*/
function setImg(x3DArray, row, col)
var url = x3DArray[row][col];
var img = document.createElement('img');
img.src = url;
img.style.width = '50px';
return img;
generateTable(imgArray);
</script>
</body>
</html>answered Mar 6 at 22:58
zer00nezer00ne
24.7k32445
Thanks for your help, I ended up getting things working by changing the document.createTextNode to document.createElement and adding another line of code with the url cellText.setAttribute("src", "../images/slicedImages/_r"+(i+1)+"_c"+(j+1)+".jpg"); to get the images.
– Michael
Mar 7 at 1:08
I see, customizing the filenames is a good solution that many people never consider or willing to do (either they don't own the original or lazy). Here's a more efficient version:cellImg.src = `../images/slicedImages/_r$i+1_c$j+1.jpg`;
– zer00ne
Mar 7 at 3:09
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55029104%2fhow-to-add-image-slices-in-place-of-createtextnode-when-building-a-table-with-js%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
3D Array
Get the urls of 16 images and place them in a 3D array:
var fourXfour3DArray = [
[url0, url1, url2, url3],
[url4, url5, url6, url7],
[url8, url9, url10, url11],
[url12, url13, url14, url15]
];
In the demo the line where createTextNode() is replaced by a function called setImg() which will accept a 3D array of image urls, and index numbers of current row and column positions.
Demo
Details are commented in demo
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
</head>
<body>
<script>
var imgArray = [['http://www.clker.com/cliparts/U/k/6/3/4/M/yellow-rounded-number-0-md.png', 'http://www.clker.com/cliparts/2/5/6/d/1242796868203109724Number_1_in_green_rounded_square.svg.med.png', 'http://www.clker.com/cliparts/k/e/O/E/Y/f/orange-rounded-square-with-number-2-md.png','http://www.clker.com/cliparts/m/e/j/n/R/V/number-3-in-light-blue-rounded-square-md.png'],['http://www.clker.com/cliparts/X/b/l/a/X/w/red-rounded-square-with-number-3-md.png', 'http://www.clker.com/cliparts/p/7/W/8/F/T/purple-rounded-square-with-number-5-md.png', 'http://www.clker.com/cliparts/1/R/V/3/S/t/number-6-square-orange-md.png', 'http://www.clker.com/cliparts/g/I/c/I/S/3/red-rounded-square-with-number-7-md.png'], [ 'http://www.clker.com/cliparts/V/T/J/T/o/M/blue-rounded-square-with-number-8-md.png', 'http://www.clker.com/cliparts/B/f/Q/6/l/x/red-rounded-square-with-number-8-md.png', 'http://www.clker.com/cliparts/W/J/x/h/t/E/red-rounded-square-with-number-10-md.png', 'http://www.clker.com/cliparts/O/C/B/M/R/0/blue-rounded-square-with-number-11-md.png'], ['http://www.clker.com/cliparts/0/Y/a/p/2/W/hot-pink-rounded-square-with-number-12-md.png','http://www.clker.com/cliparts/V/X/Y/5/Y/t/red-rounded-square-with-number-13-th.png', 'http://www.clker.com/cliparts/W/H/D/y/K/5/green-rounded-square-with-number-14-md.png', 'http://www.clker.com/cliparts/q/l/a/c/m/x/purple-rounded-square-with-number-15-md.png']];
function generateTable(imgArray)
var body = document.getElementsByTagName("body")[0];
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
for (var r = 0; r < 4; r++)
var row = document.createElement("tr");
for (var c = 0; c < 4; c++)
var cell = document.createElement("td");
// Call setImg() pass imgArray, current row and column index
var cellImg = setImg(imgArray, r, c);
cell.appendChild(cellImg);
row.appendChild(cell);
tblBody.appendChild(row);
tbl.appendChild(tblBody);
body.appendChild(tbl);
/*
Pass a 3D array, current index numbers of row and column positions
Create a <img>
Add url and width
return <img>
*/
function setImg(x3DArray, row, col)
var url = x3DArray[row][col];
var img = document.createElement('img');
img.src = url;
img.style.width = '50px';
return img;
generateTable(imgArray);
</script>
</body>
</html>answered Mar 6 at 22:58
zer00nezer00ne
24.7k32445
Thanks for your help, I ended up getting things working by changing the document.createTextNode to document.createElement and adding another line of code with the url cellText.setAttribute("src", "../images/slicedImages/_r"+(i+1)+"_c"+(j+1)+".jpg"); to get the images.
– Michael
Mar 7 at 1:08
I see, customizing the filenames is a good solution that many people never consider or willing to do (either they don't own the original or lazy). Here's a more efficient version:cellImg.src = `../images/slicedImages/_r$i+1_c$j+1.jpg`;
– zer00ne
Mar 7 at 3:09
add a comment |
0
3D Array
Get the urls of 16 images and place them in a 3D array:
var fourXfour3DArray = [
[url0, url1, url2, url3],
[url4, url5, url6, url7],
[url8, url9, url10, url11],
[url12, url13, url14, url15]
];
In the demo the line where createTextNode() is replaced by a function called setImg() which will accept a 3D array of image urls, and index numbers of current row and column positions.
Demo
Details are commented in demo
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
</head>
<body>
<script>
var imgArray = [['http://www.clker.com/cliparts/U/k/6/3/4/M/yellow-rounded-number-0-md.png', 'http://www.clker.com/cliparts/2/5/6/d/1242796868203109724Number_1_in_green_rounded_square.svg.med.png', 'http://www.clker.com/cliparts/k/e/O/E/Y/f/orange-rounded-square-with-number-2-md.png','http://www.clker.com/cliparts/m/e/j/n/R/V/number-3-in-light-blue-rounded-square-md.png'],['http://www.clker.com/cliparts/X/b/l/a/X/w/red-rounded-square-with-number-3-md.png', 'http://www.clker.com/cliparts/p/7/W/8/F/T/purple-rounded-square-with-number-5-md.png', 'http://www.clker.com/cliparts/1/R/V/3/S/t/number-6-square-orange-md.png', 'http://www.clker.com/cliparts/g/I/c/I/S/3/red-rounded-square-with-number-7-md.png'], [ 'http://www.clker.com/cliparts/V/T/J/T/o/M/blue-rounded-square-with-number-8-md.png', 'http://www.clker.com/cliparts/B/f/Q/6/l/x/red-rounded-square-with-number-8-md.png', 'http://www.clker.com/cliparts/W/J/x/h/t/E/red-rounded-square-with-number-10-md.png', 'http://www.clker.com/cliparts/O/C/B/M/R/0/blue-rounded-square-with-number-11-md.png'], ['http://www.clker.com/cliparts/0/Y/a/p/2/W/hot-pink-rounded-square-with-number-12-md.png','http://www.clker.com/cliparts/V/X/Y/5/Y/t/red-rounded-square-with-number-13-th.png', 'http://www.clker.com/cliparts/W/H/D/y/K/5/green-rounded-square-with-number-14-md.png', 'http://www.clker.com/cliparts/q/l/a/c/m/x/purple-rounded-square-with-number-15-md.png']];
function generateTable(imgArray)
var body = document.getElementsByTagName("body")[0];
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
for (var r = 0; r < 4; r++)
var row = document.createElement("tr");
for (var c = 0; c < 4; c++)
var cell = document.createElement("td");
// Call setImg() pass imgArray, current row and column index
var cellImg = setImg(imgArray, r, c);
cell.appendChild(cellImg);
row.appendChild(cell);
tblBody.appendChild(row);
tbl.appendChild(tblBody);
body.appendChild(tbl);
/*
Pass a 3D array, current index numbers of row and column positions
Create a <img>
Add url and width
return <img>
*/
function setImg(x3DArray, row, col)
var url = x3DArray[row][col];
var img = document.createElement('img');
img.src = url;
img.style.width = '50px';
return img;
generateTable(imgArray);
</script>
</body>
</html>answered Mar 6 at 22:58
zer00nezer00ne
24.7k32445
Thanks for your help, I ended up getting things working by changing the document.createTextNode to document.createElement and adding another line of code with the url cellText.setAttribute("src", "../images/slicedImages/_r"+(i+1)+"_c"+(j+1)+".jpg"); to get the images.
– Michael
Mar 7 at 1:08
I see, customizing the filenames is a good solution that many people never consider or willing to do (either they don't own the original or lazy). Here's a more efficient version:cellImg.src = `../images/slicedImages/_r$i+1_c$j+1.jpg`;
– zer00ne
Mar 7 at 3:09
add a comment |
0
0
0
3D Array
Get the urls of 16 images and place them in a 3D array:
var fourXfour3DArray = [
[url0, url1, url2, url3],
[url4, url5, url6, url7],
[url8, url9, url10, url11],
[url12, url13, url14, url15]
];
In the demo the line where createTextNode() is replaced by a function called setImg() which will accept a 3D array of image urls, and index numbers of current row and column positions.
Demo
Details are commented in demo
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
</head>
<body>
<script>
var imgArray = [['http://www.clker.com/cliparts/U/k/6/3/4/M/yellow-rounded-number-0-md.png', 'http://www.clker.com/cliparts/2/5/6/d/1242796868203109724Number_1_in_green_rounded_square.svg.med.png', 'http://www.clker.com/cliparts/k/e/O/E/Y/f/orange-rounded-square-with-number-2-md.png','http://www.clker.com/cliparts/m/e/j/n/R/V/number-3-in-light-blue-rounded-square-md.png'],['http://www.clker.com/cliparts/X/b/l/a/X/w/red-rounded-square-with-number-3-md.png', 'http://www.clker.com/cliparts/p/7/W/8/F/T/purple-rounded-square-with-number-5-md.png', 'http://www.clker.com/cliparts/1/R/V/3/S/t/number-6-square-orange-md.png', 'http://www.clker.com/cliparts/g/I/c/I/S/3/red-rounded-square-with-number-7-md.png'], [ 'http://www.clker.com/cliparts/V/T/J/T/o/M/blue-rounded-square-with-number-8-md.png', 'http://www.clker.com/cliparts/B/f/Q/6/l/x/red-rounded-square-with-number-8-md.png', 'http://www.clker.com/cliparts/W/J/x/h/t/E/red-rounded-square-with-number-10-md.png', 'http://www.clker.com/cliparts/O/C/B/M/R/0/blue-rounded-square-with-number-11-md.png'], ['http://www.clker.com/cliparts/0/Y/a/p/2/W/hot-pink-rounded-square-with-number-12-md.png','http://www.clker.com/cliparts/V/X/Y/5/Y/t/red-rounded-square-with-number-13-th.png', 'http://www.clker.com/cliparts/W/H/D/y/K/5/green-rounded-square-with-number-14-md.png', 'http://www.clker.com/cliparts/q/l/a/c/m/x/purple-rounded-square-with-number-15-md.png']];
function generateTable(imgArray)
var body = document.getElementsByTagName("body")[0];
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
for (var r = 0; r < 4; r++)
var row = document.createElement("tr");
for (var c = 0; c < 4; c++)
var cell = document.createElement("td");
// Call setImg() pass imgArray, current row and column index
var cellImg = setImg(imgArray, r, c);
cell.appendChild(cellImg);
row.appendChild(cell);
tblBody.appendChild(row);
tbl.appendChild(tblBody);
body.appendChild(tbl);
/*
Pass a 3D array, current index numbers of row and column positions
Create a <img>
Add url and width
return <img>
*/
function setImg(x3DArray, row, col)
var url = x3DArray[row][col];
var img = document.createElement('img');
img.src = url;
img.style.width = '50px';
return img;
generateTable(imgArray);
</script>
</body>
</html>answered Mar 6 at 22:58
zer00nezer00ne
24.7k32445
3D Array
Get the urls of 16 images and place them in a 3D array:
var fourXfour3DArray = [
[url0, url1, url2, url3],
[url4, url5, url6, url7],
[url8, url9, url10, url11],
[url12, url13, url14, url15]
];
In the demo the line where createTextNode() is replaced by a function called setImg() which will accept a 3D array of image urls, and index numbers of current row and column positions.
Demo
Details are commented in demo
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
</head>
<body>
<script>
var imgArray = [['http://www.clker.com/cliparts/U/k/6/3/4/M/yellow-rounded-number-0-md.png', 'http://www.clker.com/cliparts/2/5/6/d/1242796868203109724Number_1_in_green_rounded_square.svg.med.png', 'http://www.clker.com/cliparts/k/e/O/E/Y/f/orange-rounded-square-with-number-2-md.png','http://www.clker.com/cliparts/m/e/j/n/R/V/number-3-in-light-blue-rounded-square-md.png'],['http://www.clker.com/cliparts/X/b/l/a/X/w/red-rounded-square-with-number-3-md.png', 'http://www.clker.com/cliparts/p/7/W/8/F/T/purple-rounded-square-with-number-5-md.png', 'http://www.clker.com/cliparts/1/R/V/3/S/t/number-6-square-orange-md.png', 'http://www.clker.com/cliparts/g/I/c/I/S/3/red-rounded-square-with-number-7-md.png'], [ 'http://www.clker.com/cliparts/V/T/J/T/o/M/blue-rounded-square-with-number-8-md.png', 'http://www.clker.com/cliparts/B/f/Q/6/l/x/red-rounded-square-with-number-8-md.png', 'http://www.clker.com/cliparts/W/J/x/h/t/E/red-rounded-square-with-number-10-md.png', 'http://www.clker.com/cliparts/O/C/B/M/R/0/blue-rounded-square-with-number-11-md.png'], ['http://www.clker.com/cliparts/0/Y/a/p/2/W/hot-pink-rounded-square-with-number-12-md.png','http://www.clker.com/cliparts/V/X/Y/5/Y/t/red-rounded-square-with-number-13-th.png', 'http://www.clker.com/cliparts/W/H/D/y/K/5/green-rounded-square-with-number-14-md.png', 'http://www.clker.com/cliparts/q/l/a/c/m/x/purple-rounded-square-with-number-15-md.png']];
function generateTable(imgArray)
var body = document.getElementsByTagName("body")[0];
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
for (var r = 0; r < 4; r++)
var row = document.createElement("tr");
for (var c = 0; c < 4; c++)
var cell = document.createElement("td");
// Call setImg() pass imgArray, current row and column index
var cellImg = setImg(imgArray, r, c);
cell.appendChild(cellImg);
row.appendChild(cell);
tblBody.appendChild(row);
tbl.appendChild(tblBody);
body.appendChild(tbl);
/*
Pass a 3D array, current index numbers of row and column positions
Create a <img>
Add url and width
return <img>
*/
function setImg(x3DArray, row, col)
var url = x3DArray[row][col];
var img = document.createElement('img');
img.src = url;
img.style.width = '50px';
return img;
generateTable(imgArray);
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
</head>
<body>
<script>
var imgArray = [['http://www.clker.com/cliparts/U/k/6/3/4/M/yellow-rounded-number-0-md.png', 'http://www.clker.com/cliparts/2/5/6/d/1242796868203109724Number_1_in_green_rounded_square.svg.med.png', 'http://www.clker.com/cliparts/k/e/O/E/Y/f/orange-rounded-square-with-number-2-md.png','http://www.clker.com/cliparts/m/e/j/n/R/V/number-3-in-light-blue-rounded-square-md.png'],['http://www.clker.com/cliparts/X/b/l/a/X/w/red-rounded-square-with-number-3-md.png', 'http://www.clker.com/cliparts/p/7/W/8/F/T/purple-rounded-square-with-number-5-md.png', 'http://www.clker.com/cliparts/1/R/V/3/S/t/number-6-square-orange-md.png', 'http://www.clker.com/cliparts/g/I/c/I/S/3/red-rounded-square-with-number-7-md.png'], [ 'http://www.clker.com/cliparts/V/T/J/T/o/M/blue-rounded-square-with-number-8-md.png', 'http://www.clker.com/cliparts/B/f/Q/6/l/x/red-rounded-square-with-number-8-md.png', 'http://www.clker.com/cliparts/W/J/x/h/t/E/red-rounded-square-with-number-10-md.png', 'http://www.clker.com/cliparts/O/C/B/M/R/0/blue-rounded-square-with-number-11-md.png'], ['http://www.clker.com/cliparts/0/Y/a/p/2/W/hot-pink-rounded-square-with-number-12-md.png','http://www.clker.com/cliparts/V/X/Y/5/Y/t/red-rounded-square-with-number-13-th.png', 'http://www.clker.com/cliparts/W/H/D/y/K/5/green-rounded-square-with-number-14-md.png', 'http://www.clker.com/cliparts/q/l/a/c/m/x/purple-rounded-square-with-number-15-md.png']];
function generateTable(imgArray)
var body = document.getElementsByTagName("body")[0];
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
for (var r = 0; r < 4; r++)
var row = document.createElement("tr");
for (var c = 0; c < 4; c++)
var cell = document.createElement("td");
// Call setImg() pass imgArray, current row and column index
var cellImg = setImg(imgArray, r, c);
cell.appendChild(cellImg);
row.appendChild(cell);
tblBody.appendChild(row);
tbl.appendChild(tblBody);
body.appendChild(tbl);
/*
Pass a 3D array, current index numbers of row and column positions
Create a <img>
Add url and width
return <img>
*/
function setImg(x3DArray, row, col)
var url = x3DArray[row][col];
var img = document.createElement('img');
img.src = url;
img.style.width = '50px';
return img;
generateTable(imgArray);
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
</head>
<body>
<script>
var imgArray = [['http://www.clker.com/cliparts/U/k/6/3/4/M/yellow-rounded-number-0-md.png', 'http://www.clker.com/cliparts/2/5/6/d/1242796868203109724Number_1_in_green_rounded_square.svg.med.png', 'http://www.clker.com/cliparts/k/e/O/E/Y/f/orange-rounded-square-with-number-2-md.png','http://www.clker.com/cliparts/m/e/j/n/R/V/number-3-in-light-blue-rounded-square-md.png'],['http://www.clker.com/cliparts/X/b/l/a/X/w/red-rounded-square-with-number-3-md.png', 'http://www.clker.com/cliparts/p/7/W/8/F/T/purple-rounded-square-with-number-5-md.png', 'http://www.clker.com/cliparts/1/R/V/3/S/t/number-6-square-orange-md.png', 'http://www.clker.com/cliparts/g/I/c/I/S/3/red-rounded-square-with-number-7-md.png'], [ 'http://www.clker.com/cliparts/V/T/J/T/o/M/blue-rounded-square-with-number-8-md.png', 'http://www.clker.com/cliparts/B/f/Q/6/l/x/red-rounded-square-with-number-8-md.png', 'http://www.clker.com/cliparts/W/J/x/h/t/E/red-rounded-square-with-number-10-md.png', 'http://www.clker.com/cliparts/O/C/B/M/R/0/blue-rounded-square-with-number-11-md.png'], ['http://www.clker.com/cliparts/0/Y/a/p/2/W/hot-pink-rounded-square-with-number-12-md.png','http://www.clker.com/cliparts/V/X/Y/5/Y/t/red-rounded-square-with-number-13-th.png', 'http://www.clker.com/cliparts/W/H/D/y/K/5/green-rounded-square-with-number-14-md.png', 'http://www.clker.com/cliparts/q/l/a/c/m/x/purple-rounded-square-with-number-15-md.png']];
function generateTable(imgArray)
var body = document.getElementsByTagName("body")[0];
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
for (var r = 0; r < 4; r++)
var row = document.createElement("tr");
for (var c = 0; c < 4; c++)
var cell = document.createElement("td");
// Call setImg() pass imgArray, current row and column index
var cellImg = setImg(imgArray, r, c);
cell.appendChild(cellImg);
row.appendChild(cell);
tblBody.appendChild(row);
tbl.appendChild(tblBody);
body.appendChild(tbl);
/*
Pass a 3D array, current index numbers of row and column positions
Create a <img>
Add url and width
return <img>
*/
function setImg(x3DArray, row, col)
var url = x3DArray[row][col];
var img = document.createElement('img');
img.src = url;
img.style.width = '50px';
return img;
generateTable(imgArray);
</script>
</body>
</html>answered Mar 6 at 22:58
zer00nezer00ne
24.7k32445
answered Mar 6 at 22:58
zer00nezer00ne
24.7k32445
answered Mar 6 at 22:58
zer00nezer00ne
24.7k32445
answered Mar 6 at 22:58
zer00nezer00ne
24.7k32445
24.7k32445
Thanks for your help, I ended up getting things working by changing the document.createTextNode to document.createElement and adding another line of code with the url cellText.setAttribute("src", "../images/slicedImages/_r"+(i+1)+"_c"+(j+1)+".jpg"); to get the images.
– Michael
Mar 7 at 1:08
I see, customizing the filenames is a good solution that many people never consider or willing to do (either they don't own the original or lazy). Here's a more efficient version:cellImg.src = `../images/slicedImages/_r$i+1_c$j+1.jpg`;
– zer00ne
Mar 7 at 3:09
add a comment |
Thanks for your help, I ended up getting things working by changing the document.createTextNode to document.createElement and adding another line of code with the url cellText.setAttribute("src", "../images/slicedImages/_r"+(i+1)+"_c"+(j+1)+".jpg"); to get the images.
– Michael
Mar 7 at 1:08
I see, customizing the filenames is a good solution that many people never consider or willing to do (either they don't own the original or lazy). Here's a more efficient version:cellImg.src = `../images/slicedImages/_r$i+1_c$j+1.jpg`;
– zer00ne
Mar 7 at 3:09
Thanks for your help, I ended up getting things working by changing the document.createTextNode to document.createElement and adding another line of code with the url cellText.setAttribute("src", "../images/slicedImages/_r"+(i+1)+"_c"+(j+1)+".jpg"); to get the images.
– Michael
Mar 7 at 1:08
Thanks for your help, I ended up getting things working by changing the document.createTextNode to document.createElement and adding another line of code with the url cellText.setAttribute("src", "../images/slicedImages/_r"+(i+1)+"_c"+(j+1)+".jpg"); to get the images.
– Michael
Mar 7 at 1:08
I see, customizing the filenames is a good solution that many people never consider or willing to do (either they don't own the original or lazy). Here's a more efficient version:
cellImg.src = `../images/slicedImages/_r$i+1_c$j+1.jpg`;– zer00ne
Mar 7 at 3:09
I see, customizing the filenames is a good solution that many people never consider or willing to do (either they don't own the original or lazy). Here's a more efficient version:
cellImg.src = `../images/slicedImages/_r$i+1_c$j+1.jpg`;– zer00ne
Mar 7 at 3:09
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55029104%2fhow-to-add-image-slices-in-place-of-createtextnode-when-building-a-table-with-js%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
