Let's start off with some important details: I have a dynamic table that is being generated. The structure of the table is as follows:
|item__ | price | category | category | category | category | picture |
|chicken| $20 | _______ |_ ______ | _______ | _______ | 1000.png|
var array = csvpls();
var table = "<tr>";
for (var i = 0; i < array.length; i++) {
for (var j = 0; j < array[i].length; j++) {
if (j == 6) {
table += "<td>" + "<img src='CSV_Photos/" + array[i][j] +"' style ='width:500px;height:300px'>";
} else {
table += "<td>" + array[i][j];
}
table += "</tr>";
table += "</tr>";
}
document.getElementById("Invtable").innerHTML = table;
The above code snippet showcases my current implementation, where 'array' represents a 2D array. In each row, when it comes to the 6th column, I aim to display an image. Despite running this code, no table is rendered on the screen.
In the following code segment:
var array = csvpls();
var table = "<tr>";
for (var i = 0; i < array.length; i++) {
for (var j = 0; j < array[i].length; j++) {
table += "<td>" + array[i][j];
}
table += "<tr>";
table += "</tr>";
}
document.getElementById("Invtable").innerHTML = table;
When the conditional statement and image tag are removed from the initial code, the table renders correctly but displays '1000.png' instead of the actual image. The folder 'CSV_Photos' contains the images, located in the same directory. Any suggestions or assistance in resolving this issue would be greatly appreciated.
Update: The second part of the code successfully generates the table without any issues. However, every row's 6th column contains the image name ('1000.png') from the 'CSV_Photos' folder. I intend to have the actual image displayed instead of just the file name. My first attempt at incorporating the image element seems to be causing the problem, leading to the failure of table creation.