Can anyone tell me how I could put this in three column table using javascript/jquery? Product, Price and Discount(calculating 20%)

Question

Here is my code.

var products = ["Echo Dot", "Echo Plus", "Echo Auto", "Echo Show", "Echo Link"];
var prices = [49.99, 69.99, 129.99, 229.99, 1099.99];
toDisplay = "";
total = 0;

for (var i = 0; i < products.length; i++) {
  toDisplay += "<li>" + products[i] + " - " + prices[i] + "</li>";
  total += prices[i];
}

document.getElementById('prices').innerHTML = toDisplay;

<ol id="prices">
</ol>

Yeah, I basically want a table but I am not sure how to create it so it has my code along with the discount calculation — NewPythonLearner, Oct 30 '20 at 22:35

score 2 · Accepted Answer · answered Oct 30 '20 at 22:47

Use a <table> element. <table> elements have a method called insertRow which adds a new row to the table, and the row elements <tr> have a method called insertCell which adds a new cell to the row element. We'll use both of those to add the data to the table instead of accumulating an html string, like so:

var products = ["Echo Dot", "Echo Plus", "Echo Auto", "Echo Show", "Echo Link"];
var prices = [49.99, 69.99, 129.99, 229.99, 1099.99];
var discountPercent = 20;

var table = document.getElementById("the-table");

for (var i = 0; i < products.length; i++) {
  var row = table.insertRow();
  
  row.insertCell().textContent = products[i];
  row.insertCell().textContent = prices[i];
  row.insertCell().textContent = ((100 - discountPercent) * prices[i] / 100).toFixed(2);
}

table {
  border-collapse: collapse;
}

table td, table th {
  border: 1px solid black;
  padding: 5px 10px;
}

<table id="the-table">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Price After 20% Discount</th>
    </tr>
  </thead>
</table>

I used textContent to set the text of the newly added cell instead of innerHTML that can some problems.

I guess they never did. Maybe it's just that they were discouraged for layout, but never for data as discussed here https://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html — react_or_angluar, Oct 31 '20 at 11:40

score 0 · Answer 2 · edited Oct 31 '20 at 10:19

Try this code :

<body>
    <table id="prices"></table>

    <script>
      var title = ["Product", "Price", "Discount"];

      var products = [
        "Echo Dot",
        "Echo Plus",
        "Echo Auto",
        "Echo Show",
        "Echo Link",
      ];

      var prices = [49.99, 69.99, 129.99, 229.99, 1099.99];

      var discount = prices.map(myFunction);

      function myFunction(value) {
        return ((value * 80) / 100).toFixed(2);
      }

      var toDisplay = "";
      var t = "";
      var i = 0;

      for (; i < products.length; i++) {
        if (i < title.length) {
          t += "<th>" + title[i] + "</th>";
        }
        toDisplay +=
          "<tr>" +
          "<td>" +
          products[i] +
          "</td>" +
          "<td>" +
          prices[i] +
          "</td>" +
          "<td>" +
          discount[i] +
          "</td>" +
          "</tr>";
      }

      t = "<tr>" + t + "</tr>" + toDisplay;

      document.getElementById("prices").innerHTML = t;
    </script>
  </body>

Can anyone tell me how I could put this in three column table using javascript/jquery? Product, Price and Discount(calculating 20%)

2 Answers2