HTML not displaying tags created from jQuery appropriately-CodePudding

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.

<td id="transaction-body">
                        
</td>

The jQuery is this:

function createTable(array) {
     var tableBody = document.getElementById("transaction-body");
     for (var i = 0; i < array.length; i  ) {
          var row = `
          <tr>
            <td align="left" width="55%" style="padding: 6px 12px;font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px;">${array[i].name} ${array[i].model}
               </td>
            <td align="left" width="25%" style="padding: 6px 12px;font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px;">   ${array[i].qty}
               </td>
            <td align="left" width="25%" style="padding: 6px 12px;font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px;"> ${array[i].price}
               </td>
            <td align="left" width="25%" style="padding: 6px 12px;font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px;">
                ${array[i].amount}
               </td>
        </tr>
          `;
          tableBody.innerHTML  = row;
     }
}

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

CodePudding user response：

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

<table><tbody id="transaction-body"></tbody></table>

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
  }) => `<tr>
      <td>${name} ${model}</td>  
      <td>${qty}</td>
      <td>${price}</td>
      <td>${amount}</td>
      </tr>`)
  .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;
}

<table>
  <thead>
    <tr>
      <th>Name/model</th>
      <th>Qty</th>
      <th>Price</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody id="transaction-body"></tbody>
</table>