CODEWITHSUNDEEP
javascriptjqueryhtml
schlomm
schlomm

Reputation: 571

Append image to <td> via jquery

I'm struggling with an issue appending an image to an <td>-element . Unfortunately I'm not able to show you an complete jsfiddle (values-calculation is rather complex), 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.net/ZLj6R.jpg

I've tried some workarounds, and also come 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.net/dKC5L.jpg

Would be awesome to get some tips from you :)

Upvotes: 3

Views: 13361

Answers (2)

Mohammad Ismail Khan
Mohammad Ismail Khan

Reputation: 651

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.

Upvotes: 5

nolvorite
nolvorite

Reputation: 1

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.

Upvotes: 0

Related Questions