CODEWITHSUNDEEP
javascriptimagecell
Inkers
Inkers

Reputation: 219

Display images into dynamic table

I have a table which is generated based on user input to a form. That generates rows and cols. I want the nodes to be filled with an image. I am getting the table but nodes are filled with [object HTML image element]? I thiink this is trying to access the image but failing? Here is what I have tried. All help appreciated.

   for (r = 0; r < howOften; r++) {
    row = table.insertRow(-1);

    for (c = 0; c < numDays; c++) {
        col = row.insertCell(-1);
        img=new Image();
        img.src="../www/images/TEST.png";
        col.appendChild(document.createTextNode(img));
    };
};

Upvotes: 0

Views: 3108

Answers (2)

Mironline
Mironline

Reputation: 2799

If you want to use jQuery, this is one of the solutions

in html : 

<div id="container"></div>

in js : 

var table = $('<table></table>');

for (r = 0; r < howOften; r++) {
  var row = $('<tr></tr>');
    for (c = 0; c < numDays; c++) {
     row.append('<td><img src="../www/images/TEST.png" /></td>');
    };
    table.append(row);
};

$('#container').append(table);

Upvotes: 0

jeremy
jeremy

Reputation: 10057

You're just pasting the actual text of what the image object contains, which is definitely not what you want to do. Try something like the following.

img.onload = function() { //check to make sure that the image has loaded
    col.appendChild(img);
};

Upvotes: 2

Related Questions