HTML: Create a Table Dynamically and Add Images Dynamically

525
March 01, 2017, at 04:35 AM

I'm creating a table and trying to fill it with content dynamically.

table in HTML:

<body onload="fillCart()">
<table border="2" align="center" id="myTable">
  <tr>
    <td>Catalog #</td>
    <td>Item</td>
    <td>Price</td>
    <td>Quantity</td>    
    <td>Total</td>    
  </tr>
</table> 

fillCart() Function:

function fillCart()
{   
  var table = document.getElementById("myTable");
  var i = 0;
  for (i = 0; i < sessionStorage.length; i++)
  {
    var key = sessionStorage.key(i);
    var value = sessionStorage.getItem(key);
    var name = getItemName(key);
    var price = getPrice(key);
    price = parseInt(price).toFixed(2);
    var row = table.insertRow(1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    var cell5 = row.insertCell(4);
    cell1.innerHTML = "<center>"+key+"</center>";
    cell2.innerHTML = name;
    cell3.innerHTML = "<center>"+"$"+price+"</center>";
    cell4.innerHTML = "<center>"+value+"</center>";
    cell5.innerHTML = "total will go here";
  }
}

In cell two, I would like to add (1)Name of the item, (2)Image of the Item, and (3)Remove Button to delete the item from the cart.

I was hoping I could create a series of strings (based on the current item being processed) inside the getItemName() function and combine them all as HTML code. Is this even possible?

Rent Charter Buses Company
READ ALSO
How to build a javascript countdown timer that doesn&#39;t reset on page refresh?

How to build a javascript countdown timer that doesn't reset on page refresh?

I found this code from this site: https://wwwsitepoint

2681
In a popup, change text in a span

In a popup, change text in a span

I was trying to add an external JavaScript file to my HTML for a practice Chrome extensionIt has a slider whose value needs to be taken and sent back to a span tag on the popup

392
Meteor: display list of current users for document

Meteor: display list of current users for document

I have a list of documents in meteor that only authorised users can accessIt's kind of like google docs

293
UIWebView in UITableViewCell only completes load in first cell

UIWebView in UITableViewCell only completes load in first cell

I am using a UIWebView as the accessory view in each UITableViewCell in a UITable in order to display a tiny Openlayers map in each table viewWhen I first display the table view, the UIWebView in the first cell displays the map fine, but the other UIWebViews...

417