Handlebar structure

Question

I have a table using the handlebar template. The #each is declared in the first row of the table, the tag is declared in the next row, and the #each closing declaration is completed in the last row.

<table style="border-collapse: collapse; width: 100%;" border="1"><colgroup><col><col><col><col></colgroup>
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">{{#each itemList}}</td>
</tr>
<tr>
<td>{{name}}</td>
<td>{{price}}</td>
<td>{{qty}}</td>
<td>{{total}}</td>
</tr>
<tr>
<td colspan="4">{{/each}}</td>
</tr>
</tbody>
</table>

After executing the compiled template, the generated output is as follows. In the table where each row is defined, the first and last rows are not deleted. Is there any way to remove it?

<table style="border-collapse: collapse; width: 100%;" border="1" data-mce-style="border-collapse: collapse; width: 100%;">
  <colgroup>
    <col>
    <col>
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>a</th>
      <th>c</th>
      <th>v</th>
      <th>d</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="4">
        <tr>
          <td>12</td>
          <td>3</td>
          <td>2</td>
          <td>2</td>
        </tr>
         <tr>
            <td colspan="4"></td>
         </tr>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

I'm not sure why you want to wrap the #each call like {{#each itemList}}. This will produce completely broken HTML.

You want each item in the itemList to have a row , so you need to make sure the rows are marked and are enclosed by #each, and any tokens outside of each are valid and enclosing :

const template = Handlebars.compile(`
<table style="border-collapse: collapse; width: 100%;" border="1">      <colgroup><col><col><col><col></colgroup>
   <thead>
     <tr>
       <th>Name</th>
       <th>Price</th>
       <th>Quantity</th>
       <th>Total</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td colspan="4"></td>
     </tr>
     {{#each itemList}}
       <tr>
         <td>{{name}}</td>
         <td>{{price}}</td>
         <td>{{qty}}</td>
         <td>{{total}}</td>
       </tr>
     {{/each}}
     <tr>
       <td colspan="4"></td>
     </tr>
  </tbody>
</table>
`);

const data = {
  itemList: [
    {
      name: 'One',
      price: 1,
      qty: 1,
      total: 1
    },
    {
      name: 'Two',
      price: 2,
      qty: 2,
      total: 4
    }
  ]
};

const output = template(data);

document.body.innerHTML = output;

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>