为了账号安全,请及时绑定邮箱和手机立即绑定

使用 JQuery 将数据附加到 html 表

使用 JQuery 将数据附加到 html 表

收到一只叮咚 2023-08-24 10:22:33
如何在表中追加 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>
查看完整描述

1 回答

?
莫回无

TA贡献1865条经验 获得超7个赞

您可以使用.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>


查看完整回答
反对 回复 2023-08-24
  • 1 回答
  • 0 关注
  • 112 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信