使用 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 = [ { ItemId:1, Name:'Item 1', Description:'A', Price:1, Quantity:1, Amount:1}, { ItemId:2, Name:'Item 2', Description:'B', Price:2, Quantity:2, Amount:2} ]; $.each(data, (index, row) => { const rowContent = `<tr> <td>${row.ItemId}</td> <td>${row.Name}</td> <td>${row.Description}</td> <td>${row.Price}</td> <td>${row.Quantity}</td> <td>${row.Amount}</td> </tr>`; $('#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 "> <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"> </tbody> </table>