使用 JQuery 将数据附加到 html 表

Question

如何在表中追加 json 数据。Json 数据格式：我想循环抛出这个数组并将结果附加到这个 html 表中

HTML 表格：

<table class="table table-bordered table-hover ">

                <tr class="success">

                    <th>

                        Id

                    </th>

                    <th>

                        Name

                    </th>

                    <th>

                        Description

                    </th>

                    <th>

                        Price

                    </th>

                    <th>

                        Quantity

                    </th>

                    <th>

                        Amount

                    </th>

                </tr>

                <tbody id="tbdata">

                    <!-- data will go here -->

                </tbody>

Answer 1

您可以使用.each迭代数组并.append添加行：const data = [&nbsp; { ItemId:1, Name:'Item 1', Description:'A', Price:1, Quantity:1, Amount:1},&nbsp; { ItemId:2, Name:'Item 2', Description:'B', Price:2, Quantity:2, Amount:2}];$.each(data, (index, row) => {&nbsp; const rowContent&nbsp;&nbsp; = `<tr>&nbsp; &nbsp; &nbsp; &nbsp;<td>${row.ItemId}</td>&nbsp; &nbsp; &nbsp; &nbsp;<td>${row.Name}</td>&nbsp; &nbsp; &nbsp; &nbsp;<td>${row.Description}</td>&nbsp; &nbsp; &nbsp; &nbsp;<td>${row.Price}</td>&nbsp; &nbsp; &nbsp; &nbsp;<td>${row.Quantity}</td>&nbsp; &nbsp; &nbsp; &nbsp;<td>${row.Amount}</td>&nbsp; &nbsp; &nbsp;</tr>`;&nbsp; $('#tbdata').append(rowContent);});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table class="table table-bordered table-hover ">&nbsp; <tr class="success">&nbsp; &nbsp; <th>Id</th>&nbsp; &nbsp; <th>Name</th>&nbsp; &nbsp; <th>Description</th>&nbsp; &nbsp; <th>Price</th>&nbsp; &nbsp; <th>Quantity</th>&nbsp; &nbsp; <th>Amount</th>&nbsp; </tr>&nbsp; <tbody id="tbdata">&nbsp; </tbody></table>