使用 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>