Putting image in table using innerHTML (Javascript / Html)

Question

Alright, some information right off the bat, I have a table that is dynamically being created. The table looks roughly like this :

|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 if {
                table += "<td>" + array[i][j];
                }
        table += "<tr>";
        table += "</tr>";
        }

    document.getElementById("Invtable").innerHTML = table;

This is the code that I have at the moment, where array is a 2D array. And every (6th column in the row, I want it to be an image) When runned, this does not display any table whatsoever.

In the code below

        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;

Without the if statement and the additional img content, the table displays perfectly, but obviously 1000.png shows up instead of the actual image. CSV_Photos is a folder where the image is stored at, essentially in the same folder. I don't know what is wrong, any help or leads are appreciated.

Edit: So the 2nd part of the code I have works perfectly, It generates a table for me. But at every 6th column of a row is a picture name (1000.png) and its in the folder CSV_Photo. I want it to no display as 1000.png, but instead the picture. The 1st section of code is my attempt to make it an image, but no table is created so I'm guessing there is something wrong with this line table += "" + <"img src= 'CSV_Photos/" + array[i][j] +"'style ='width:500px;height:300px'>";

Answer 1

• If you wanted the image to be on the 2nd row, 3rd cell the condition should be:

if (i === 1 && j === 2) {...

• If you want the whole 2nd row with the same image in each cell then it should be:

if (i === 1) {...

• If you want a entire 3rd column to have the same image then it would be:

if (j === 2) {...

• If it's a different image for every cell, then name each file by table coordinates like this...

img1-2.png

...then change the string that renders an image inside a cell as:

 table += `<td><img src='http://imgh.us/img${i}-${j}.png' style ='width:50px;height:50px'></td>`

• Or if I understand correctly, the array already has the filenames. If that's true, then the string should be...

 table += `<td><img src='http://imgh.us/${array[i][j]}' style ='width:50px;height:50px'></td>`

... and the array would be something like this:

  var array = [
      ['rt','AD','1000.png','uy','ii'],
      ['rt','AD','1001.png','uy','ii'],
      ['rt','AD','1002.png','uy','ii']
    ];

BTW, I had to do some changes to the code in order for it to work since it's only a partial code you provided, but the gist of it is the condition of course.

Also you'll notice the strange syntax of the strings, that's ES6 template literals or "strings on steroids".

Demo

var array = cvpls();
var table = ``;
for (var i = 0; i < array.length; i++) {
  table += `<tr>`;
  for (var j = 0; j < array[i].length; j++) {
    if (i === 1 && j === 2) {
      table += `<td><img src='http://imgh.us/statik.gif' style ='width:50px;height:50px'></td>`;
    } else {
      table += `<td>${array[i][j]}</td>`;
    }
  }
  table += `</tr>`;
  document.getElementById("Invtable").innerHTML = table;
}

function cvpls() {
  return array = [
    [4, 5, 6, 9, 2],
    ['img', 'img', 'img', 'img', 'img'],
    ['d', 'b', 'g', 'i', 'o']
  ];
}

td {
  border: 1px solid black
}

<table id='Invtable'></table>

Answer 2

I think there are several problems in your code that needs to be fixed :

• You are not appending the td elements inside the tr but directly inside the table, you need to move the line table += "<tr>"; before the nested loop.
• And you are not specifying closing tags for <td> elements so when you include the img tag it will mess up the layout.
• Another thing just inverse the use of " and ' in your img tag definition because HTML uses ".." to define attributes.

Here's how should be your code:

var array = csvpls();
var table = "<tr>";
for (var i = 0; i < array.length; i++) {
  table += "<tr>";
  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"></td>';
    } else if {
      table += "<td>" + array[i][j] + "</td>";
    }
  }
  table += "</tr>";
}

document.getElementById("Invtable").innerHTML = table;

Answer 3

Try:

    var array = csvpls();
    var table = "<table>";
    for (var i = 0; i < array.length; i++) {
        table += "<tr>";

        for (var j = 0; j < array[i].length; j++) {
            table += "<td>" + array[i][j];
        }

        table += "</tr>";
    }
    table += "</table>";

    document.getElementById("Invtable").innerHTML = table;