CODEWITHSUNDEEP
javascriptimagehtml-table
Pablo Picasso
Pablo Picasso

Reputation: 133

Inserting an Image into a Table

I have a table where I am inserting data into the table from a query. Because I am treating every key and pair as a text when I insert the image it is returning [object HTMLImageElement]. Because I am converting it to text after the fact it is not rendering properly. Is there a better way of doing this?

            if (condition) == 1) {
               var image = document.createElement("img");
               image.src = "source1.png";

             } else if (condition) == 0 ) {
               var image = document.createElement("img");
               image.src = "source2.png";
             }

             let Table = [

               {'First Text Item': 'Text Result'),
               'Second Text Item': 'Text Result',
               'Third Text Item': 'Text Result',
               'Fourth Text Item': 'Text Result',
               'Fifth Text Item': 'Text Result',
               'Image': image},

             ];

             function generateTable(table, data) {
               for (let element of data) {
                 let row = table.insertRow();
                 for (key in element) {
                   let cell = row.insertCell();
                   let text = document.createTextNode(element[key]);
                   cell.appendChild(text);
                 }
               }
             }
             generateTable(table, Table);

Upvotes: 0

Views: 36

Answers (1)

Itamar
Itamar

Reputation: 1634

Seems like your problem is with let text = document.createTextNode(element[key]);

You need to check if the attribute is a DOM component:

  • if it is an Image DOM element - add it directly
  • if not let text = document.createTextNode(element[key]);

You can see this answer on how to detect DOM elements: https://stackoverflow.com/a/384380/2938073

You can get DOM type by using Element.tagName (see)

Upvotes: 1

Related Questions