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