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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I'm not sure why you want to wrap the
#eachcall like{{#each itemList}} You want each item in the:
Name
Price
Quantity
Total
{{#each itemList}}
{{name}}
{{price}}
{{qty}}
{{total}}
{{/each}}
`);
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;
itemListto have a row, so you need to make sure the rows are marked and #each, and any tokens outside of each are valid and enclosing