HTML not displaying tags created from jQuery appropriately

Question

I have a small jQuery function that is supposed to create dynamic html tags filled with data. But only the data is showing without the html tags created.

Here's the short HTML curled from the original code.

The jQuery is this:

function createTable(array) {
     var tableBody = document.getElementById("transaction-body");
     for (var i = 0; i < array.length; i++) {
          var row = `
          
            ${array[i].name} ${array[i].model}
               
               ${array[i].qty}
               
             ${array[i].price}
               
            
                ${array[i].amount}
               
        
          `;
          tableBody.innerHTML += row;
     }
}

For this, only the data, is being displayed like below;

mplungjan · Accepted Answer

You are inserting a table row into a table cell - change to

Please try this

const array = [{
    name: "nokia",
    model: "N97",
    qty: 3,
    price: 50,
    amount: 150
  },
  {
    name: "nokia",
    model: "N97",
    qty: 3,
    price: 50,
    amount: 150
  }
];

document.getElementById("transaction-body").innerHTML = array
  .map(({
    name,
    model,
    qty,
    price,
    amount
  }) => `
      ${name} ${model}  
      ${qty}
      ${price}
      ${amount}
      `)
  .join("")

td {
  width: 15%;
  padding: 6px 12px;
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  text-align: right;
  border: 1py solid black;
}

th {
  text-transform: capitalize;
  text-align: right;
}

th:nth-child(1),
td:nth-child(1) {
  width: 35%;
  text-align: left;
}


  
    
      Name/model
      Qty
      Price
      Amount

HTML not displaying tags created from jQuery appropriately

Answers (1)

Related Questions