[英]How can I add image source file info into a new array inside of another array in javascript
我正在做作业，需要动态创建表格并添加20个图像切片（每个单元格1个）以制作完整图片。 我找到了一些代码，可以适应我的需要，但是我一直坚持将每个图像的图像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>
我假设这些字符串将是图像路径。 您正在创建文本节点而不是图像元素：
var td = document.createElement('td');
var img = document.createElement('img');
img.src = rows[i][j];
td.appendChild(img);
tr.appendChild(td);
您可以在for循环中创建一个新的img元素，并for设置源（ 以及其他可能的属性 ）。 然后，该元素将被添加到表格单元格中，就像您之前处理文本一样。
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 中的数组开头添加新的数组元素？
[英]How can I add new array elements at the beginning of an array in JavaScript?
如何将一个数组从javascript文件写入另一个新的js文件？
[英]How can i write one array from javascript file to another new js file?
Javascript 如何将带有另一个数组的数组添加到新数组中？
[英]Javascript How to add array with another array into a new array?
如何通过提取 Javascript/Typescript 中另一个对象数组中的数组来创建对象数组？
[英]How can I create an array of objects by extracting an array that is inside another array of objects in Javascript/Typescript?
如何在另一个对象数组中获取按值过滤的新数组？ javascript
[英]How can I get a new array filtered by value in another array of objects? javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.