I'm struggling with an issue appending an image to an <td>-element . Unfortunately I'm not able to show you an plete jsfiddle (values-calculation is rather plex), but I hope some code snippets are enough.

Table-Structure:

var table = createElement('table');
var header = table.createTHead();
var row = header.insertRow(0);
var cell0 = row.insertCell(0);
cell0.innerHTML = "Indikator"
var cell1 = row.insertCell(1);
cell1.innerHTML = "In dieser Region"
var cell2 = row.insertCell(2);
cell2.innerHTML = "Alle Regionen: Höchster Werte"
var cell3 = row.insertCell(3);
cell3.innerHTML = "Alle Regionen: Niedrigster Werte"
var cell4 = row.insertCell(4);
cell4.innerHTML = "Alle Regionen: Durchschnitt"
var cell5 = row.insertCell(5);
cell5.innerHTML = "Bewertung";
tbody = table.appendChild(document.createElement('tbody'));

Then I'm using a for-loop, where the rest of the table is created:

for (var key in values) {
    //...
    //method to calculate some values
    ...
    //append values to tbody
    $(table).find(tbody).append("<tr>");
    $(table).find(tbody).append( "<td>"+(indicatorValue)+"</td>");
    $(table).find(tbody).append( "<td>"+(regionValue)+"</td>");
    $(table).find(tbody).append( "<td>"+(bestValues)+"</td>");
    $(table).find(tbody).append( "<td>"+(worstValues)+"</td>");
    $(table).find(tbody).append( "<td>"+(average)+"</td>");
    $(table).find(tbody).append( "<td>"+ createIndicator(picIdentifier));
}

All the methods are working properly, but I have some issues with the last part, the createIndicator(picIdentifier), which is used to refer to the image source.

function createIndicator(state) {
    var img = document.createElement('img');
    if (picIdentifier == 'green') {
        img.src = "img/green_circle.png";
    } else {
        img.src = 'img/red_circle.png';
    }
    return img;
}

Coming to my problem: The images are not created, but it's only stated [object HTMLImageElement] for each cell, where the image should be located. You can check it here: .jpg

I've tried some workarounds, and also e to an result, where the images will be created by using $(table).find(tbody).append(createIndicator(picIdentifier)); but with this I do not create the images in table-cells. Check it here, how it looks: .jpg

Would be awesome to get some tips from you :)

I'm struggling with an issue appending an image to an <td>-element . Unfortunately I'm not able to show you an plete jsfiddle (values-calculation is rather plex), but I hope some code snippets are enough.

Table-Structure:

var table = createElement('table');
var header = table.createTHead();
var row = header.insertRow(0);
var cell0 = row.insertCell(0);
cell0.innerHTML = "Indikator"
var cell1 = row.insertCell(1);
cell1.innerHTML = "In dieser Region"
var cell2 = row.insertCell(2);
cell2.innerHTML = "Alle Regionen: Höchster Werte"
var cell3 = row.insertCell(3);
cell3.innerHTML = "Alle Regionen: Niedrigster Werte"
var cell4 = row.insertCell(4);
cell4.innerHTML = "Alle Regionen: Durchschnitt"
var cell5 = row.insertCell(5);
cell5.innerHTML = "Bewertung";
tbody = table.appendChild(document.createElement('tbody'));

Then I'm using a for-loop, where the rest of the table is created:

for (var key in values) {
    //...
    //method to calculate some values
    ...
    //append values to tbody
    $(table).find(tbody).append("<tr>");
    $(table).find(tbody).append( "<td>"+(indicatorValue)+"</td>");
    $(table).find(tbody).append( "<td>"+(regionValue)+"</td>");
    $(table).find(tbody).append( "<td>"+(bestValues)+"</td>");
    $(table).find(tbody).append( "<td>"+(worstValues)+"</td>");
    $(table).find(tbody).append( "<td>"+(average)+"</td>");
    $(table).find(tbody).append( "<td>"+ createIndicator(picIdentifier));
}

All the methods are working properly, but I have some issues with the last part, the createIndicator(picIdentifier), which is used to refer to the image source.

function createIndicator(state) {
    var img = document.createElement('img');
    if (picIdentifier == 'green') {
        img.src = "img/green_circle.png";
    } else {
        img.src = 'img/red_circle.png';
    }
    return img;
}

Coming to my problem: The images are not created, but it's only stated [object HTMLImageElement] for each cell, where the image should be located. You can check it here: https://i.sstatic/ZLj6R.jpg

I've tried some workarounds, and also e to an result, where the images will be created by using $(table).find(tbody).append(createIndicator(picIdentifier)); but with this I do not create the images in table-cells. Check it here, how it looks: https://i.sstatic/dKC5L.jpg

Would be awesome to get some tips from you :)

• javascript
• jquery
• html

2 Answers 2

I hope this will work, don't go for function

  var img = "<img src='img/green_circle.png' />";
  if(picIdentifier != 'green')
  {
    img = "<img src='img/red_circle.png' />";
  }
  $(table).find(tbody).append( "<td>"+ img +"</td>");

you can not return the element, it will always return object, so either you append it in function or use my code.

If you're using either Firefox or Chrome, right click on the image, and select Inspect Element, to check for any potential DOM errors. Remember that it has to be wrapped in <td></td>'s.