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 :

|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'>";

Can you please share your array data? and what did you got as result? — cнŝdk
– cнŝdk, Commented Jun 4, 2017 at 0:45
It is just a huge 2D array [98][6]. Like I mentioned the 2nd part of the code, it generates a table perfectly, but at every 6th column is the name of a picture. I don't want the name, but the actual picture in the table. So the 1st part of the code is what I tried to do, but when it ran, nothing shows up. — DaNubCake
– DaNubCake, Commented Jun 4, 2017 at 0:50
Try the code in my answer, I think this should solve your problem. — cнŝdk
– cнŝdk, Commented Jun 4, 2017 at 0:56

cнŝdk · Accepted Answer · 2017-06-04 00:55:20Z

1

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;

answered Jun 4, 2017 at 0:55

cнŝdk

32.2k7 gold badges62 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DaNubCake Over a year ago

The issue still occurs. When I tested out your code, but removing if (j == 6) { table += "<td>" + '<img src="CSV_Photos/' + array[i][j] + '" style ="width:500px;height:300px"></td>'; } else if {. It creates a table perfectly, but obviously the name of the image appears not the picture. But when I used the code you had there, nothing happens, in fact the table does not even appear anymore.

DaNubCake Over a year ago

Fixed my issue The line was like so : table += "<td> <img src='CSV_Photos/" + array[i][j] + "' style ='width:300px;height:300px'> </td>"; But, you're code helped a lot, thanks!

cнŝdk Over a year ago

Ok, I got it, in fact var table = "<tr>"; should be var table = "<table>";, I didn't saw that in the first place.

Aidan Hoolachan · Accepted Answer · 2017-06-03 22:43:03Z

1

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;

answered Jun 3, 2017 at 22:43

Aidan Hoolachan

2,4191 gold badge14 silver badges14 bronze badges

Comments

zer00ne · Accepted Answer · 2017-06-04 01:45:11Z

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>

edited Jun 4, 2017 at 1:45

answered Jun 3, 2017 at 23:48

zer00ne

45.2k6 gold badges50 silver badges82 bronze badges

3 Comments

DaNubCake Over a year ago

The image is in every 6th column of a row. So for example [0][6] is an image, 1[6] is an image. I believe the problem is in the way I formatted the line for the image to appear. Which is table += "<td>" + "<img src='CSV_Photos/" + array[i][j] +"'style ='width:500px;height:300px'>"; The array at [i][j] should be the name of my image for example "1000.png".

zer00ne Over a year ago

I'd name the images as to where it belongs within the table. Of course it might be to your advantage your way, but I don't know what csvpls() does or what it really returns. @DaNubCake See update.

zer00ne Over a year ago

@DaNubCake See newest update, I think I know what you mean now.

Collectives™ on Stack Overflow

Putting image in table using innerHTML (Javascript / Html)

3 Answers 3

3 Comments

Comments

Demo

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Demo

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related