[英]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.